components

Switch (code)

Switches toggle the state of a single setting on or off.

Game mode

Zelda

import { LinkText } from '@mediahuis/chameleon-react'

<Switch id="switch" label="Game mode" message="Zelda" />

<Switch id="switch" label="Game mode" message="Zelda" />

Props

Name	Type	Default	Required	Description
action	Node	-	-	Contents displayed within the ActionLabel.
checked	Boolean	-	-	Sets the native checkbox checked state.
className	String	-	-	Extend classNames.
disabled	Boolean	-	-	Sets the native checkbox disabled state.
error	Boolean	-	-	Visually displayed as error. Will add the necessary accessibility tags.
id	String	-	true	Native HTML id attribute. Will also affect the label-id, and the message-id. For accessibility reasons.
label	Node	-	true	Contents displayed within the PrimaryLabel.
labelHidden	Boolean	-	-	Visibly hide the label. (label is still required for a11y)
labelPlacement	'left''right'	'left'	-	The placement of the label.
labelProps	{ "color": "String" "decoration": "'inherit''none''underline''line-through'" "fontFamily": "'inherit''primary''secondary''system'" "fontWeight": "'inherit''regular''medium''bold'" "size": "'Heading1''Heading2''Heading3''Heading4''Heading5''Heading6''Caption1''Caption2'" "textTransform": "'inherit''none''capitalize''uppercase''lowercase'" }	-	-	Props passed to the label component, the API may change in the future.
message	String	-	-	Contents displayed beneath the label.
onChange	Function	-	-	Native change event, validate on event.target.checked.
optionalLabel	String	-	-	Contents displayed within the OptionalLabel.
required	Boolean	-	-	Sets native input required attribute.
value	String	-	-	Native input value.

System Props

m, mb, ml, mr, mt, mx, my

System Props

Next to the properties listed in the propstable, a collection of system props can be added to any component for further general styling and layouting purposes. These props vary per component.

To read more about the system, click here to check out its dedicated page.

Action

default: undefined

Adds an action or extra information to your item, mostly used for links.

LabelLinkText

<Switch
  id="action"
  label="Label"
  action={<LinkText href="#">LinkText</LinkText>}
/>

<Switch
  id="action"
  label="Label"
  action={<LinkText href="#">LinkText</LinkText>}
/>

Checked

default: undefined

Make a Switch selected by passing the checked prop.

Label

<Switch id="checked" label="Label" checked />

<Switch id="checked" label="Label" checked />

Disabled

default: undefined

Marking a Switch as disabled, will disable all interaction with the element.

Label

<Switch id="disabled" label="Label" disabled />

<Switch id="disabled" label="Label" disabled />

Error

default: undefined

To convey an error to the user, you can set the error prop to true.

Label

The visual style is only passed to the message.

<Switch
  id="error"
  label="Label"
  message="The visual style is only passed to the message."
  error
/>

<Switch
  id="error"
  label="Label"
  message="The visual style is only passed to the message."
  error
/>

LabelHidden

default: undefined

To meet accessibility requirements, every Switch should have an associated label. We do support the ability to visually hide the label when the Switch's purpose is clear.

Label

<Switch id="labelHidden" label="Label" labelHidden />

<Switch id="labelHidden" label="Label" labelHidden />

LabelPlacement

default: undefined

The positioning of the label against the switch itself. The full label will move position (also action, message & optionalLabel).

Undefined

Left

Right

<Switch mb={5} id="labelPlacementNone" label="Undefined" />
<Switch mb={5} id="labelPlacementLeft" label="Left" labelPlacement="left" />
<Switch id="labelPlacementRight" label="Right" labelPlacement="right" />

<Switch mb={5} id="labelPlacementNone" label="Undefined" />
<Switch mb={5} id="labelPlacementLeft" label="Left" labelPlacement="left" />
<Switch id="labelPlacementRight" label="Right" labelPlacement="right" />

LabelProps

default: undefined

You can visually change the label of the Switch. For more info about the possibilities, check the Text component's documentation (Label inherits the Text).

Label

<Switch
  mb={5}
  id="labelProps"
  label="Label"
  labelProps={{
    color: 'primaryBase',
    decoration: 'line-through',
    fontFamily: 'primary',
    fontWeight: 'regular',
    size: 'Heading2',
    textTransform: 'capitalize',
  }}
/>

<Switch
  mb={5}
  id="labelProps"
  label="Label"
  labelProps={{
    color: 'primaryBase',
    decoration: 'line-through',
    fontFamily: 'primary',
    fontWeight: 'regular',
    size: 'Heading2',
    textTransform: 'capitalize',
  }}
/>

Message

default: undefined

Give additional information to the user.

Label

Message can be set to provide additional information.

<Switch
  id="message"
  label="Label"
  message="Message can be set to provide additional information."
/>

<Switch
  id="message"
  label="Label"
  message="Message can be set to provide additional information."
/>

OptionalLabel

default: undefined

Compared with TextField, the Switch is not required by default. The optionalLabel is additional feedback to the user, please provide it where needed.

Label(I'm optional)

<Switch id="optionalLabel" label="Label" optionalLabel="I'm optional" />

<Switch id="optionalLabel" label="Label" optionalLabel="I'm optional" />

Required

default: undefined

Make the field required if needed. If you already added optionalLabel, the field will stay optional to not confuse the user.

Label

<Switch id="required" required label="Label" />

<Switch id="required" required label="Label" />

Value

default: undefined

Use value for controlled Switches.

Label 1

Label 2

() => {
  const [form, setForm] = React.useState({
    switch1: false,
    switch2: true,
  });

  const handleSwitchChange = ({ target }) => {
    setForm({
      ...form,
      [target.value]: !form[target.value],
    });
  };

  return (
    <React.Fragment>
      <Switch
        id="switch1"
        label="Label 1"
        value="switch1"
        checked={form.switch1}
        onChange={handleSwitchChange}
        mb={5}
      />
      <Switch
        id="switch2"
        label="Label 2"
        value="switch2"
        checked={form.switch2}
        onChange={handleSwitchChange}
      />
    </React.Fragment>
  );
};

() => {
  const [form, setForm] = React.useState({
    switch1: false,
    switch2: true,
  });
  const handleSwitchChange = ({ target }) => {
    setForm({
      ...form,
      [target.value]: !form[target.value],
    });
  };
  return (
    <React.Fragment>
      <Switch
        id="switch1"
        label="Label 1"
        value="switch1"
        checked={form.switch1}
        onChange={handleSwitchChange}
        mb={5}
      />
      <Switch
        id="switch2"
        label="Label 2"
        value="switch2"
        checked={form.switch2}
        onChange={handleSwitchChange}
      />
    </React.Fragment>
  );
};