Skip the navigation

Toggle

Toggle switches change the state of a single item. Compared to the checkbox, their changes usually apply without any additional submission.

  • Figma:Ready
  • Web:Ready
  • iOS:Ready
  • Package:Core

Usage

import { Toggle } from "@caesars-ui/core"

Ensure the toggle switch is used for binary options, allowing users to enable or disable a single setting. Use clear and concise labels to indicate the function of each toggle switch, enhancing user understanding and accessibility.

Properties

* indicates required.

Accessibility

Principle

Status

Description

Percievable
Ready
The toggle passes color contrast requirements and includes an icon when switched on.
Operable
Ready
It functions seamlessly with keyboard navigation.
Understandable
Ready
The toggle's label or icon clearly communicates its purpose or the action that it will trigger. Users also receive appropriate feedback after clicking the toggle, such as a success message or a change in page content.
Robust
Ready
The toggle component is accessible to users with a range of abilities and devices, and adheres to web standards and best practices. The component is also tested thoroughly to ensure that it functions correctly in a variety of contexts and situations.