data/primitives/docs/components/toggle.mdx
<Description>A two-state button that can be either on or off.</Description>
<HeroContainer> <ToggleDemo /> </HeroContainer> <HeroCodeBlock folder="Toggle" /><Highlights features={["Full keyboard navigation.", "Can be controlled or uncontrolled."]} />
Install the component from your command line.
npm install @radix-ui/react-toggle
Import the component.
import { Toggle } from "radix-ui";
export default () => <Toggle.Root />;
The toggle.
<PropsTable data={[ { name: "asChild", required: false, type: "boolean", default: "false", description: ( <> Change the default rendered element for the one passed as a child, merging their props and behavior.
Read our <a href="../guides/composition">Composition</a> guide for
more details.
</>
),
},
{
name: "defaultPressed",
type: "boolean",
description:
"The pressed state of the toggle when it is initially rendered. Use when you do not need to control its pressed state.",
},
{
name: "pressed",
type: "boolean",
description: (
<span>
The controlled pressed state of the toggle. Must be used in
conjunction with <Code>onPressedChange</Code>.
</span>
),
},
{
name: "onPressedChange",
type: "(pressed: boolean) => void",
typeSimple: "function",
description:
"Event handler called when the pressed state of the toggle changes.",
},
{
name: "disabled",
type: "boolean",
description: (
<span>
When <Code>true</Code>, prevents the user from interacting with the
toggle.
</span>
),
},
]}
/>
<DataAttributesTable data={[ { attribute: "[data-state]", values: ["on", "off"], }, { attribute: "[data-disabled]", values: "Present when disabled", }, ]} />
<KeyboardTable data={[ { keys: ["Space"], description: "Activates/deactivates the toggle.", }, { keys: ["Enter"], description: "Activates/deactivates the toggle.", }, ]} />