Checkbox.Switch

• Web
• Native

Reference

Gympass <Checkbox.Switch /> component implements all our design guidelines such as default spacings, borders and color pallete tokens. Switches are best used for communicating activation (e.g., on/off states), while checkboxes are best used for communicating selection (e.g., multiple table rows). Switches, unlike checkboxes, can't have an error state.

Usage

import { Checkbox } from '@gympass/yoga';

render(() => {
  const [checked, toggleChecked] = useState(false);
  const onChange = () => toggleChecked(!checked);

  return <Checkbox.Switch checked={checked} onChange={onChange} />;
});
render(() => {
  const [checked, toggleChecked] = useState(false);
  const onChange = () => toggleChecked(!checked);

  return <Checkbox.Switch checked={checked} onChange={onChange} />;
});

Props