DhToggle

Switch built on native <input type="checkbox" role="switch"> — full form participation and keyboard out of the box.

Basic

Email notifications

Dark mode

Experimental features

Subject to change without notice.

<DhToggle bind:checked={notifications} label="Email notifications" />
<DhToggle bind:checked={darkMode} label="Dark mode" />
<DhToggle bind:checked={experimental} label="Experimental features"
  helperText="Subject to change without notice." />

Label position

End (default)

Start

<DhToggle bind:checked={value} label="End (default)" />
<DhToggle bind:checked={value} label="Start" labelPosition="start" />

States

<DhToggle label="Off (default)" />
<DhToggle label="On" checked />
<DhToggle label="Disabled off" disabled />
<DhToggle label="Disabled on"  checked disabled />
<DhToggle label="Required" required />
<DhToggle label="Error" errorText="Cannot change while sync is running." />

In a form

<form>
  <DhToggle label="Enable notifications" name="notifications" value="on" />
  <DhToggle label="Send weekly digest"   name="digest"        value="on" />
  <DhToggle label="Accept terms"         name="terms"         value="on" required />
  <DhButton type="submit" variant="primary" text="Save settings" />
</form>