Toggle

A two-state button that is either on or off.

Import

tsx

import { Toggle } from "@indoku/ui"

Examples

Basic usage

tsx

function ToggleDemo() {  return (    <HStack gap="4" wrap="wrap">      <Toggle aria-label="Bold" variant="outline">        B      </Toggle>      <ToggleGroup.Root type="multiple" variant="outline">        <ToggleGroup.Item value="b">B</ToggleGroup.Item>        <ToggleGroup.Item value="i">I</ToggleGroup.Item>        <ToggleGroup.Item value="u">U</ToggleGroup.Item>      </ToggleGroup.Root>      <ToggleGroup.Root type="single" spacing={0}>        <ToggleGroup.Item value="l">L</ToggleGroup.Item>        <ToggleGroup.Item value="c">C</ToggleGroup.Item>        <ToggleGroup.Item value="r">R</ToggleGroup.Item>      </ToggleGroup.Root>      <ToggleGroup.Root orientation="vertical" spacing={0}>        <ToggleGroup.Item value="1">1</ToggleGroup.Item>        <ToggleGroup.Item value="2">2</ToggleGroup.Item>      </ToggleGroup.Root>    </HStack>  )}

Props

Toggle

Prop	Type	Default	Description
`variant`	`"default" \| "outline"`	`default`	`"default"` is transparent (ghost), `"outline"` has a border.
`pressed`	`boolean`	–
`defaultPressed`	`boolean`	–
`onPressedChange`	`(pressed: boolean) => void`	–

* required. Style props and HTML attributes are accepted as well.

← Form Toggle Group →

Created by @indokudev