Switch

Ready

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.

Code

Usage

Specifications

Props

Name	Default	Description
defaultChecked: boolean		Initial state of the switch, only when it is uncontrolled.
checked: boolean	`false`	If true, the component is checked. If undefined, the component will be uncontrolled and the checked attribute will be managed internally by the component.
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'	`'before'`	Whether the label should appear after or before the switch.
name: string		Name attribute of the input element.
disabled: boolean	`false`	If true, the component will be disabled.
optional: boolean	`false`	If true, the component will display `(Optional)` next to the label.
onChange: function		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: string \| object		Size of the margin to be applied to the component ('xxsmall' \| 'xsmall' \| 'small' \| 'medium' \| 'large' \| 'xlarge' \| 'xxlarge'). You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.
size: string	`'fitContent'`	Size of the component ('small' \| 'medium' \| 'large' \| 'fillParent' \| 'fitContent').
tabIndex: number	`0`	Value of the tabindex.

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 onChange = (newValue) => {
    console.log(newValue);
  };

  return (
    <DxcInset space="2rem">
      <DxcSwitch label="Bluetooth" defaultChecked={true} onChange={onChange} />
    </DxcInset>
  );
}

() => {
  const onChange = (newValue) => {
    console.log(newValue);
  };

  return (
    <DxcInset space="2rem">
      <DxcSwitch label="Bluetooth" defaultChecked={true} onChange={onChange} />
    </DxcInset>
  );
}

Props
Examples
- Controlled
- Uncontrolled

Edit this page on GitHub

Spinner

NextTable

Switch

Props

Examples

Controlled

Uncontrolled

Contents