Form.Switch

Edit this page Leave feedback

A switch control for use with Form.SwitchSet. This component has identical props to Form.Checkbox and is interoperable with Form.SwitchSet and useCheckboxSetValues.

Note: extra props added to this component are passed as attributes to the underlying input node. See MDN for documentation on available input attributes.

Controlled Standalone Usage

Show editable code example

Any Paragon component or export may be added to the code example.

() => {
  const [isChecked, setChecked] = useState(false);
  const handleChange = e => setChecked(e.target.checked);
  return (
    <Form.Switch checked={isChecked} onChange={handleChange}>
      I want pizza.
    </Form.Switch>
  );
}

() => {
  const [isChecked, setChecked] = useState(false);
  const handleChange = e => setChecked(e.target.checked);
  return (
    <Form.Switch checked={isChecked} onChange={handleChange}>
      I want pizza.
    </Form.Switch>
  );
}

Unlabeled control

Show editable code example

Any Paragon component or export may be added to the code example.

() => {
  const [isChecked, setChecked] = useState(false);
  const handleChange = e => setChecked(e.target.checked);
  return (
    <SwitchControl
      checked={isChecked}
      onChange={handleChange}
      aria-label="Form switch"
    />
  );
}

() => {
  const [isChecked, setChecked] = useState(false);
  const handleChange = e => setChecked(e.target.checked);
  return (
    <SwitchControl
      checked={isChecked}
      onChange={handleChange}
      aria-label="Form switch"
    />
  );
}

Controlled Group Usage with useCheckboxSetValues

useCheckboxSetValues(initialValues[]) returns an array: [state, dispatchers].

dispatchers includes add(value) remove(value) set(values[]) and clear()

Show editable code example

Any Paragon component or export may be added to the code example.

() => {

  const [colorValues, { add, remove }] = useCheckboxSetValues(['green']);

  const handleChange = e => {
    if (e.target.checked) {
      add(e.target.value);
    } else {
      remove(e.target.value);
    }
  }
  return (
    <Form.Group>
      <Form.Label>Which Color?</Form.Label>
      <Form.SwitchSet
        name="colors"
        onChange={handleChange}
        value={colorValues}
      >
        <Form.Switch value="red">Red</Form.Switch>
        <Form.Switch value="green">Green</Form.Switch>
        <Form.Switch value="blue">Blue</Form.Switch>
        <Form.Switch value="cyan" disabled>Cyan</Form.Switch>
      </Form.SwitchSet>
    </Form.Group>
  );
}

() => {

  const [colorValues, { add, remove }] = useCheckboxSetValues(['green']);

  const handleChange = e => {
    if (e.target.checked) {
      add(e.target.value);
    } else {
      remove(e.target.value);
    }
  }
  return (
    <Form.Group>
      <Form.Label>Which Color?</Form.Label>
      <Form.SwitchSet
        name="colors"
        onChange={handleChange}
        value={colorValues}
      >
        <Form.Switch value="red">Red</Form.Switch>
        <Form.Switch value="green">Green</Form.Switch>
        <Form.Switch value="blue">Blue</Form.Switch>
        <Form.Switch value="cyan" disabled>Cyan</Form.Switch>
      </Form.SwitchSet>
    </Form.Group>
  );
}

Uncontrolled Usage

Show editable code example

Any Paragon component or export may be added to the code example.

<Form.Group>
  <Form.Label>Which Color?</Form.Label>
  <Form.SwitchSet
    name="color-two"
    onChange={(e) => console.log(e.target.value)}
    defaultValue={['green']}
  >
    <Form.Switch value="red">Red</Form.Switch>
    <Form.Switch value="green">Green</Form.Switch>
    <Form.Switch value="blue">Blue</Form.Switch>
    <Form.Switch value="cyan" disabled>Cyan</Form.Switch>
  </Form.SwitchSet>
</Form.Group>

<Form.Group>
  <Form.Label>Which Color?</Form.Label>
  <Form.SwitchSet
    name="color-two"
    onChange={(e) => console.log(e.target.value)}
    defaultValue={['green']}
  >
    <Form.Switch value="red">Red</Form.Switch>
    <Form.Switch value="green">Green</Form.Switch>
    <Form.Switch value="blue">Blue</Form.Switch>
    <Form.Switch value="cyan" disabled>Cyan</Form.Switch>
  </Form.SwitchSet>
</Form.Group>

Indeterminate Usage

Show editable code example

Any Paragon component or export may be added to the code example.

() => {
  const allCheeseOptions = ['swiss', 'cheddar', 'pepperjack'];
  const [checkedCheeses, { add, remove, set, clear }] = useCheckboxSetValues(['swiss']);

  const handleChange = e => {
    e.target.checked ? add(e.target.value) : remove(e.target.value);
  };

  const handleCheckAllChange = e => {
    e.target.checked ? set(allCheeseOptions) : clear();
  };

  const allChecked = allCheeseOptions.every(value => checkedCheeses.includes(value));
  const someChecked = allCheeseOptions.some(value => checkedCheeses.includes(value));
  const isIndeterminate = someChecked && !allChecked;

  return (
    <>
      <div className="d-flex">
        <Form.Switch
          checked={allChecked}
          isIndeterminate={isIndeterminate}
          onChange={handleCheckAllChange}
        >
          All the cheese
        </Form.Switch>
      </div>
      <Form.SwitchSet
        className="p-2"
        value={checkedCheeses}
        onChange={handleChange}
      >
        <Form.Switch value="swiss">Swiss</Form.Switch>
        <Form.Switch value="cheddar">Cheddar</Form.Switch>
        <Form.Switch value="pepperjack">Pepperjack</Form.Switch>
      </Form.SwitchSet>
    </>
  );
}

() => {
  const allCheeseOptions = ['swiss', 'cheddar', 'pepperjack'];
  const [checkedCheeses, { add, remove, set, clear }] = useCheckboxSetValues(['swiss']);

  const handleChange = e => {
    e.target.checked ? add(e.target.value) : remove(e.target.value);
  };

  const handleCheckAllChange = e => {
    e.target.checked ? set(allCheeseOptions) : clear();
  };

  const allChecked = allCheeseOptions.every(value => checkedCheeses.includes(value));
  const someChecked = allCheeseOptions.some(value => checkedCheeses.includes(value));
  const isIndeterminate = someChecked && !allChecked;

  return (
    <>
      <div className="d-flex">
        <Form.Switch
          checked={allChecked}
          isIndeterminate={isIndeterminate}
          onChange={handleCheckAllChange}
        >
          All the cheese
        </Form.Switch>
      </div>
      <Form.SwitchSet
        className="p-2"
        value={checkedCheeses}
        onChange={handleChange}
      >
        <Form.Switch value="swiss">Swiss</Form.Switch>
        <Form.Switch value="cheddar">Cheddar</Form.Switch>
        <Form.Switch value="pepperjack">Pepperjack</Form.Switch>
      </Form.SwitchSet>
    </>
  );
}

Inline layout

Show editable code example

Any Paragon component or export may be added to the code example.

<Form.Group>
  <Form.Label>Which Color?</Form.Label>
  <Form.SwitchSet
    name="color-three"
    onChange={(e) => console.log(e.target.value)}
    defaultValue={['green']}
    isInline
  >
    <Form.Switch value="red">Red</Form.Switch>
    <Form.Switch value="green">Green</Form.Switch>
    <Form.Switch value="blue">Blue</Form.Switch>
    <Form.Switch value="cyan" disabled>Cyan</Form.Switch>
  </Form.SwitchSet>
</Form.Group>

<Form.Group>
  <Form.Label>Which Color?</Form.Label>
  <Form.SwitchSet
    name="color-three"
    onChange={(e) => console.log(e.target.value)}
    defaultValue={['green']}
    isInline
  >
    <Form.Switch value="red">Red</Form.Switch>
    <Form.Switch value="green">Green</Form.Switch>
    <Form.Switch value="blue">Blue</Form.Switch>
    <Form.Switch value="cyan" disabled>Cyan</Form.Switch>
  </Form.SwitchSet>
</Form.Group>

Label Position

The label is positioned to the right of the switch control by default. The label can be rendered on the left instead by passing the floatLabelLeft prop.

Show editable code example

Any Paragon component or export may be added to the code example.

<Form.Group>
  <Form.SwitchSet>
    <Form.Switch value="red">Red</Form.Switch>
    <Form.Switch value="blue" floatLabelLeft>Blue</Form.Switch>
  </Form.SwitchSet>
</Form.Group>

<Form.Group>
  <Form.SwitchSet>
    <Form.Switch value="red">Red</Form.Switch>
    <Form.Switch value="blue" floatLabelLeft>Blue</Form.Switch>
  </Form.SwitchSet>
</Form.Group>

Helper Text

A helper text component can be passed in to be rendered below the switch control.

Show editable code example

Any Paragon component or export may be added to the code example.

<Form.Group>
  <Form.SwitchSet>
    <Form.Switch
      value="red"
      helperText={
        <span>Helper text for red switch</span>
      }
    >
      Red
    </Form.Switch>
    <Form.Switch
      value="blue"
      helperText={
        <span>Helper text for blue switch</span>
      }
    >
      Blue
    </Form.Switch>
  </Form.SwitchSet>
</Form.Group>

<Form.Group>
  <Form.SwitchSet>
    <Form.Switch
      value="red"
      helperText={
        <span>Helper text for red switch</span>
      }
    >
      Red
    </Form.Switch>
    <Form.Switch
      value="blue"
      helperText={
        <span>Helper text for blue switch</span>
      }
    >
      Blue
    </Form.Switch>
  </Form.SwitchSet>
</Form.Group>

Theme Variables#

CSS Variable	Computed Value
‌	‌
‌	‌
‌	‌
‌	‌
‌	‌

Props API#

FormSwitch Props API

children node Required
Specifies contents of the component.
className string
Specifies class name to append to the base element.
labelClassName string
Specifies class name to append to the label element.
helperText node
Specifies helper text to display below the switch.
floatLabelLeft bool
Determines whether the label should float to the left when the switch is active.
Defaultfalse

SwitchControl Props API

isIndeterminate bool
Specifies whether input should be rendered in indeterminate state.
Defaultfalse
className string
Specifies class name to append to the base element.

Usage Insights#

FormSwitch

Project Name	Paragon Version	Instance Count
frontend-app-account	20.46.3	1
frontend-app-admin-portal	20.46.3	1
frontend-app-course-authoring	21.5.6	1
frontend-app-learner-dashboard	20.46.2	1
frontend-app-learning	20.46.0	1
frontend-app-publisher	20.46.3	1
frontend-lib-content-components	21.5.6	1
prospectus	20.46.2	2

SwitchControl

	Project Name	Paragon Version	Instance Count
	frontend-app-course-authoring	21.5.6	1

Edit this page Leave feedback

Paragon Design System

Theme

Form.Switch

Controlled Standalone Usage

Unlabeled control

Controlled Group Usage with useCheckboxSetValues

Uncontrolled Usage

Indeterminate Usage

Inline layout

Label Position

Helper Text

Theme Variables#

Props API#

Usage Insights#

FormSwitch

SwitchControl

All components (A-Z)

Theme

Form.Switch

Controlled Standalone Usage#

Unlabeled control#

Controlled Group Usage with useCheckboxSetValues#

Uncontrolled Usage#

Indeterminate Usage#

Inline layout#

Label Position#

Helper Text#

Theme Variables#

Props API#

Usage Insights#

FormSwitch

SwitchControl

All components (A-Z)

Controlled Standalone Usage

Unlabeled control

Controlled Group Usage with useCheckboxSetValues

Uncontrolled Usage

Indeterminate Usage

Inline layout

Label Position

Helper Text