Switch

Switch toggles are elements that can get two simple states, each of them has an impact on the system and it can be switched on or off, there are no more options. If the switch toggle is on one state, the action to change it will modify to value of the element to the contrary.

Props

Name	Type	Description	Default
defaultChecked	`boolean`	Initial state of the switch, only when it is uncontrolled.	-
checked	`boolean`	If true, the component is checked. If undefined, the component will be uncontrolled and the checked attribute will be managed internally by the component.	`false`
value	`string`	Will be passed to the `value` attribute of the HTML input element. When inside a form, this value will be only submitted if the switch is checked.	-
label	`string`	Text to be placed next to the switch.	-
labelPosition	`'before' \| 'after'`	Whether the label should appear after or before the switch.	`'before'`
name	`string`	Name attribute of the input element.	-
disabled	`boolean`	If true, the component will be disabled.	`false`
optional	`boolean`	If true, the component will display '(Optional)' next to the label.	`false`
onChange	`(checked: boolean) => void`	This function will be called when the user clicks the switch. The new value of the checked attribute will be passed as a parameter.	-
margin	`'xxsmall' \| 'xsmall' \| 'small' \| 'medium' \| 'large' \| 'xlarge' \| 'xxlarge' \| Margin`	Size of the margin to be applied to the component. You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.	-
size	`'small' \| 'medium' \| 'large' \| 'fillParent' \| 'fitContent'`	Size of the component.	`'fitContent'`
tabIndex	`number`	Value of the `tabindex` attribute.	`0`
ref	`React.Ref <HTMLDivElement>`	Reference to the component.	-

Examples

Controlled

() => {
  const [checked, changeChecked] = useState(false);
  const onChange = (newValue) => {
    changeChecked(newValue);
  };

  return (
    <DxcInset space="2rem">
      <DxcSwitch
        label="Wifi"
        checked={checked}
        onChange={onChange}
      />
    </DxcInset>
  );
}

() => {
  const [checked, changeChecked] = useState(false);
  const onChange = (newValue) => {
    changeChecked(newValue);
  };

  return (
    <DxcInset space="2rem">
      <DxcSwitch
        label="Wifi"
        checked={checked}
        onChange={onChange}
      />
    </DxcInset>
  );
}

Uncontrolled

() => {
  const switchRef = useRef();

  const handleSubmit = () => {
    const switchEl = switchRef.current.getElementsByTagName("input")[0];
    console.log(switchEl.checked ? switchEl.value : "");
  };

  return (
    <DxcInset space="2rem">
      <DxcFlex direction="column" gap="2rem">
        <DxcSwitch
          label="Bluetooth"
          defaultChecked={true}
          ref={switchRef}
          value="Bluetooth"
        />
        <DxcButton label="Submit" type="submit" onClick={handleSubmit} />
      </DxcFlex>
    </DxcInset>
  );
}

() => {
  const switchRef = useRef();

  const handleSubmit = () => {
    const switchEl = switchRef.current.getElementsByTagName("input")[0];
    console.log(switchEl.checked ? switchEl.value : "");
  };

  return (
    <DxcInset space="2rem">
      <DxcFlex direction="column" gap="2rem">
        <DxcSwitch
          label="Bluetooth"
          defaultChecked={true}
          ref={switchRef}
          value="Bluetooth"
        />
        <DxcButton label="Submit" type="submit" onClick={handleSubmit} />
      </DxcFlex>
    </DxcInset>
  );
}

Props
Examples
- Controlled
- Uncontrolled

Edit this page on GitHub

Report an issue on GitHub

Status Light

NextTable

Switch

Props

Examples

Controlled

Uncontrolled

Contents