Inputs

Toggle

A two-state button for switching an option on or off.

ToggleView source

Example

The preview is interactive. The code below it is the docs demo source; demo-only layout classes can be omitted in application code.

tsx

import { Cell } from "retend";

import { Toggle } from "innate-ui";

export function ToggleDemo() {
  const enabled = Cell.source(true);

  return <Toggle value={enabled} onChange={(value) => enabled.set(value)} label="Toggle" />;
}

API reference

This table is generated from Innate UI's exported TypeScript declarations and JSDoc. Native element attributes inherited by a prop type are not repeated here.

ToggleProps

Prop	Type	Default
`value`required Pressed state of the toggle.	`JSX.ValueOrCell<boolean>`	`—`
`onChange` Called with the next pressed state.	`(value: boolean) => void`	`—`
`label`required Accessible label for the icon-only toggle.	`JSX.ValueOrCell<string>`	`—`
`disabled` Whether the toggle is disabled.	`JSX.ValueOrCell<boolean>`	`false`
`onKeyDown` Key-down handler.	`EventHandlerProp<HTMLButtonElement, KeyboardEvent>`	`—`
`onBlur` Blur handler.	`EventHandlerProp<HTMLButtonElement, FocusEvent>`	`—`
`onClick` Click handler.	`EventHandlerProp<HTMLButtonElement, MouseEvent>`	`—`
`onFocus` Focus handler.	`EventHandlerProp<HTMLButtonElement, FocusEvent>`	`—`
`onPointerEnter` Pointer-enter handler.	`EventHandlerProp<HTMLButtonElement, PointerEvent>`	`—`
`onPointerLeave` Pointer-leave handler.	`EventHandlerProp<HTMLButtonElement, PointerEvent>`	`—`
`onPointerMove` Pointer-move handler.	`EventHandlerProp<HTMLButtonElement, PointerEvent>`	`—`
`variant` Visual treatment of the button.	`JSX.ValueOrCell<ButtonVariant>`	`"secondary"`
`size` Button size.	`JSX.ValueOrCell<ButtonSize>`	`"medium"`
`loading` Shows the loading state and disables interaction.	`JSX.ValueOrCell<boolean>`	`false`

Inspect the typed source →