Toggle Switch - Components - Design System

#Overview

Toggle Switches are used with Forms (Code).

Show codeHide code

export const ToggleSwitchFieldDemo = () => {
  const form = useForm<{ isChecked: boolean }>();
  return (
    <StyledForm onSubmit={form.handleSubmit(() => {})}>
      <ToggleSwitchField form={form} name="isChecked">
        An option
      </ToggleSwitchField>
      <StyledButton type="submit">Submit</StyledButton>
    </StyledForm>
  );
};

Name	Type	Default	Description
children *	`ReactNode`	-	Label for the toggle switch
form *	`UseFormReturn<TFieldValues>`	-	The connected form that the form field is part of
name *	`TFieldName`	-	The name of the input being registered from the form
defaultChecked	`boolean`	-	If true, the toggle switch is checked initially, for uncontrolled mode, mutually exclusive with `checked`
disabled	`boolean`	`false`	If true, the toggle switch is disabled
onChange	`ChangeEventHandler<HTMLInputElement>`	-	The change event handler

#Outside of a form

Name	Type	Default	Description	Controls
children *	`ReactNode`	-	Label for the toggle switch
checked	`boolean`	-	If true, the toggle switch is checked, mutually exclusive with `defaultChecked`
defaultChecked	`boolean`	-	If true, the toggle switch is checked initially, for uncontrolled mode, mutually exclusive with `checked`
disabled	`boolean`	`false`	If true, the toggle switch is disabled
onChange	`ChangeEventHandler<HTMLInputElement>`	-	The change event handler	-

import { ToggleSwitch } from "@blocks/form";

export const SimpleSwitch = () => <ToggleSwitch>Label</ToggleSwitch>;

#Colors

Token
BORDER_ACTIVATED_FOCUS#0003#fff4#0003#fff4
BORDER_FOCUS#0003#fff4#0003#fff4
LABEL_TEXT#000#fff#000#fff
LABEL_TEXT_ACTIVATED#000#fff#000#fff
LABEL_TEXT_ACTIVATED_DISABLED#000#fff#000#fff
LABEL_TEXT_ACTIVATED_FOCUS#000#fff#000#fff
LABEL_TEXT_DISABLED#000#fff#000#fff
LABEL_TEXT_FOCUS#000#fff#000#fff
SWITCH#fff#111#fff#111
SWITCH_ACTIVATED#fff#111#fff#111
SWITCH_ACTIVATED_DISABLED#fff#111#fff#111
SWITCH_ACTIVATED_FOCUS#fff#111#fff#111
SWITCH_DISABLED#fff#111#fff#111
SWITCH_FOCUS#fff#111#fff#111
TOGGLE#bbb#fff#bbb#fff
TOGGLE_ACTIVATED#7c4#8d6#059#17c
TOGGLE_ACTIVATED_DISABLED#7c4#8d6#059#17c
TOGGLE_ACTIVATED_FOCUS#7c4#8d6#059#17c
TOGGLE_DISABLED#bbb#fff#bbb#fff
TOGGLE_FOCUS#bbb#fff#bbb#fff

#Overview

#Outside of a form

#Colors

About us