Switch toggles the state of a single setting on or off.
The setting it controls and the setting state should be made clear from the components inline `label`.

Input busy state
See {@link https://sema4ai-design-system.pages.dev/component/checkbox#busy}

busy

description

() => {
  const [checked, setChecked] = useState(true);

  return (
    <Box width={200}>
      <Switch
        label="Label"
        value={checked ? 'Enabled' : 'Disabled'}
        checked={checked}
        onChange={(e) => setChecked(e.target.checked)}
        description="Hint"
      />
    </Box>
  );
}

Switch

() => {
  return (
    <Box width={200}>
      <Switch label="Label" busy value="Value" description="Hint" />
    </Box>
  );
}

When a switch component is a part of a form that is currently busy (e.g. data is asynchronous validated or saved) the input field
should be marked with the \`busy\` attribute. The component will be set as disabled, but will be visually different from \`disabled\` state.


Busy

() => {
  return (
    <Box width={200}>
      <Switch label="Label" value="Value" disabled description="Hint" />
    </Box>
  );
}

A component that is unavailable for input changes, should be marked with the \`disabled\` property.


Name	Description	Default
busy	Input busy state	-
description	Checkbox description	-

Switch component

Busy

Disabled