Toggle

Component

Storybook

Figma Demo

Guidelines

When implementing a toggle component, ensure it provides an immediate change in the page state without requiring a submit button. The toggle should clearly communicate its purpose through a descriptive label, such as “Show Discounts” or “Discounts Only.”

• Icon Representation: Incorporate an icon to visually represent the on and off states.
• Color Changes: Use color changes to indicate different states, ensuring high contrast for better visibility.

Usage

Toggles are best used in scenarios where users need to switch between two mutually exclusive options quickly. They are ideal for:

• Settings: Adjusting preferences such as notifications or theme modes.
• Filters: Narrowing down search results, such as showing only discounted products.
• Features: Enabling or disabling specific features on a page.

Variations

Toggle must include a label but may or may not include helper text.

Best Practices

• Clear Labels: Always provide a label that succinctly describes the toggle’s function.
• Immediate Feedback: Ensure the toggle provides instant visual feedback to indicate the state change.
• Contextual Use: Use toggles in settings or filter areas, not in forms that require submission.
• Accessible Design: Ensure the toggle is keyboard-navigable and screen reader-friendly.

Accessibility

• Keyboard Navigation: The toggle can be activated using keyboard controls (space).
• Focus Indicators: A focus state is provided around the toggle element when focus is visible.

Content

The content around the toggle should support its function:

• Descriptive Labels: Clearly describe what each toggle state means. Avoid ambiguous terms.
• Supplementary Text: Provide additional information if necessary to explain the toggle’s impact.
• Consistent Terminology: Use consistent language and style across all toggles to avoid user confusion.

Component Specs

API

• class: string | Default: undefined
  Class of the checkbox.

• checked: boolean | Default: false
  Checked state of the checkbox.

• handleClick: (value: (Passed from button value)) => void | Default: undefined Function to be called when you need control of the checked prop.

• helperText: string | Default: undefined
  Helper text of the checkbox.

• id: string | Default: undefined
  Id of the checkbox.

• label: string | Default: 'Label'
  Label of the checkbox.

• testId: string | Default: undefined
  Test id for testing purposes.

Example

<script>
	import { Toggle } from '@getprovi/craft-svelte';
</script>

<Toggle id="unique-id" label="Text label" helperText="Some helper text here." />

Types

interface Props extends Omit<HTMLInputAttributes, 'size'> {
	class?: string | null | undefined;
	checked?: HTMLInputAttributes['checked'];
	handleClick?: ((value: HTMLInputAttributes['value']) => void) | undefined;
	helperText?: string | undefined;
	id: HTMLLabelAttributes['for'];
	label: string;
	testId?: string | undefined;
}