Switch

Usage

Notifications off.

<script>
	import { Icon, Switch } from 'bref-ui';
	let enabled = $state(false);
</script>

<label>
	<Switch name="notifications" bind:checked={enabled}>
		{#if enabled}<Icon name="dark_mode" />{:else}<Icon name="light_mode" />{/if}
	</Switch>
	Notifications
</label>

Playground

<script>
	import { Switch, Icon } from 'bref-ui';
	let checked = $state(false);
</script>

<label for="playground-switch">Receive updates</label>
<Switch
	id="playground-switch"
	size="medium"
	bind:checked
	disabled={false}
	required={false}
	aria-invalid={false}
></Switch>

Sizes and states

Props

Native checkbox attributes and events are forwarded. Use a wrapping label or aria-label for an accessible name. Bind checked as needed. The optional children snippet renders decorative content inside the thumb; keep interactive elements outside the switch.

Native behavior

Tab to focus and press Space to toggle. A named switch submits its value only while checked; disabled switches do not submit.

Submitted: No submission yet.

Validation and focus

Tab through these controls to check focus. Native validation after interaction and aria-invalid retain a quiet error edge without hiding focus.