toggle

iOS-style switch that renders a visually hidden <input type="checkbox"> with a custom track and thumb. No JavaScript required — state is read from FormData on submission.

Default

Email notifications

Product updates

toggle({ name: 'notifications', label: 'Email notifications' })
toggle({ name: 'updates',       label: 'Product updates', checked: true })

With hint

Use hint to add supporting text below the switch.

Marketing emails

Receive tips, product news, and special offers.

Weekly digest

A summary of activity sent every Monday morning.

toggle({
  name:    'marketing',
  label:   'Marketing emails',
  hint:    'Receive tips, product news, and special offers.',
})
toggle({
  name:    'digest',
  label:   'Weekly digest',
  hint:    'A summary of activity sent every Monday morning.',
  checked: true,
})

Disabled

Off and disabled

On and disabled

toggle({ name: 'a', label: 'Off and disabled', disabled: true })
toggle({ name: 'b', label: 'On and disabled',  disabled: true, checked: true })

In forms

The switch submits as 'on' under its name when checked. When unchecked, the field is absent from FormData entirely — the same behaviour as a native checkbox. Read it with formData.get('name') === 'on'.

Prop	Type	Default
`name`	string	—	Field name — submitted in FormData
`label`	string	—	Visible label text
`checked`	boolean	false	Initial on/off state
`disabled`	boolean	false
`hint`	string	—	Helper text below the switch
`id`	string	—	Override the generated `id`
`class`	string	—