Component

Toggles are used to switch between two states. They are commonly used in settings, forms, and more.

View component changelog
preview
React

import Toggle from "@radui/ui/Toggle";

const ToggleExample = () => {
  const [pressed, setPressed] = React.useState(false)

  const handleChange = (newPressed) => {
    setPressed(newPressed)
  }
  
  return (
    <Toggle pressed={pressed} onPressedChange={handleChange}>
      <Icon />
    </Toggle>
  )
}
PropTypeDefaultDescription
color
string
null

Accent Color of the toggled item

ShortcutDescription
Tab

Moves focus to the toggle button.

Space

Toggles the pressed state.

Enter

Toggles the pressed state.

ReferenceWhat Rad UI follows
Button pattern

Uses button semantics with aria-pressed to expose the current on or off state.

Edit this page on GitHub →