Meta tags:
description=A high-quality, unstyled React switch component that indicates whether a setting is on or off.;
keywords=React Switch,Toggle Switch Component,Toggle Switch,Toggle Button,On/Off Control,On Off Switch,Binary Switch,Checkbox Alternative,Form Toggle Control,Aria Switch Role,Accessible Switch,Headless React Components,Base UI;

Headings (most frequently used words):

switch, root, thumb, propshide, statehide, usage, guidelines, anatomy, examples, api, reference, labeling, rendering, as, native, button, form, integration, changeeventreasonhide, changeeventdetailshide,

Text of the page (most frequently used words):
the (131), #switch (107), when (76), root (48), field (44), present (44), data (44), boolean (33), whether (28), state (26), type (25), wrapped (24), undefined (24), name (23), description (21), form (18), checked (18), element (18), label (17), value (16), component (16), string (16), has (15), function (14), render (13), focused (12), valid (12), touched (12), required (12), readonly (12), disabled (12), thumb (12), default (11), event (11), that (10), react (10), native (10), false (10), user (9), invalid (9), with (9), button (9), notifications (9), active (8), props (8), reactelement (8), style (8), been (7), classname (7), filled (6), dirty (6), changed (6), from (6), activate (6), should (6), hide (6), returns (6), cssproperties (6), css (6), input (6), not (5), unchecked (5), applied (5), prop (5), base (5), nativebutton (5), hidden (5), must (4), attribute (4), based (4), class (4), indicates (4), renders (4), checkbox (4), defaultchecked (4), and (4), using (4), labeling (4), import (4), styles (4), its (3), before (3), submitting (3), unable (3), deactivate (3), ignore (3), interaction (3), currently (3), export (3), allows (3), html (3), off (3), span (3), void (3), ref (3), submitted (3), use (3), integration (3), labels (3), rendering (3), anatomy (3), index (3), menu (3), null (2), initial (2), htmlprops (2), accepts (2), you (2), replace (2), different (2), tag (2), compose (2), another (2), object (2), table (2), propagate (2), reason (2), none (2), changeeventdetails (2), true (2), htmlinputelement (2), inputref (2), matching (2), behavior (2), uncheckedvalue (2), rendered (2), identifies (2), outside (2), oncheckedchange (2), instead (2), api (2), reference (2), buttonprops (2), callback (2), wrapping (2), div (2), htmlfor (2), sibling (2), pattern (2), enclosing (2), examples (2), forms (2), usage (2), guidelines (2), module (2), stackblitz (2), modules (2), view (2), provider (2), toggle (2), group (2), navigation (2), dialog (2), switchthumbstate, switchthumbprops, movable, part, trigger, triggered, applicable, ispropagationallowed, allowed, iscanceled, canceled, allowpropagation, cases, where, will, stop, propagation, cancel, cancels, handling, associated, custom, for, switchrootchangeeventdetails, switchrootchangeeventreason, changeeventreason, switchrootstate, switchrootprops, access, switches, submit, any, replacing, via, set, owns, useful, submits, eventdetails, handler, called, activated, deactivated, uncontrolled, controlled, initially, represents, itself, beside, handle, associations, buttons, are, supported, avoid, placed, support, prefer, around, simplest, assemble, parts, can, created, see, guide, controls, have, accessible, show, code, return, exampleswitch, tsx, source, markdown, control, setting, top, npm, github, userender, mergeprops, direction, csp, utils, tooltip, toolbar, toast, tabs, slider, separator, select, scroll, area, radio, progress, preview, card, popover, otp, new, number, meter, menubar, fieldset, drawer, context, combobox, collapsible, avatar, autocomplete, alert, accordion, components, llms, txt, typescript, customization, composition, animation, styling, handbook, about, community, releases, accessibility, quick, start, overview, search, skip, contents,

Text of the page (random words):
switch base ui skip to contents search k navigation overview quick start accessibility releases community about handbook styling animation composition customization forms typescript llms txt components accordion alert dialog autocomplete avatar button checkbox checkbox group collapsible combobox context menu dialog drawer field fieldset form input menu menubar meter navigation menu number field otp field new popover preview card progress radio scroll area select separator slider switch tabs toast toggle toggle group toolbar tooltip utils csp provider direction provider mergeprops userender github npm 1 6 0 switch top usage guidelines anatomy examples labeling a switch rendering as a native button form integration api reference root thumb switch a control that indicates whether a setting is on or off view as markdown view source notifications index tsx index module css css modules stackblitz css modules stackblitz import switch from base ui react switch import styles from index module css export default function exampleswitch return label classname styles label switch root defaultchecked classname styles switch switch thumb classname styles thumb switch root notifications label show code usage guidelines form controls must have an accessible name it can be created using a label element or the field component see labeling a switch and the forms guide anatomy import the component and assemble its parts anatomy import switch from base ui react switch switch root switch thumb switch root examples labeling a switch an enclosing label is the simplest labeling pattern wrapping a label around a switch label switch root notifications label rendering as a native button by default switch root renders a span element to support enclosing labels prefer rendering the switch as a native button when using sibling labels htmlfor id sibling label pattern with a native button div label htmlfor notifications switch notifications label switch root id notifications switch nativebutton render button switch thumb switch root div native buttons with wrapping labels are supported by using the render callback to avoid invalid html so the hidden input is placed outside the label render callback switch root nativebutton render buttonprops label button buttonprops notifications label form integration use field to handle label associations and form integration using switch in a form form field root name notifications field label switch root notifications field label field root form api reference root represents the switch itself renders a span element and a hidden input beside component props table prop type default name string name name description identifies the field when a form is submitted type string undefined defaultchecked boolean false name defaultchecked description whether the switch is initially active to render a controlled switch use the checked prop instead type boolean undefined default false checked boolean name checked description whether the switch is currently active to render an uncontrolled switch use the defaultchecked prop instead type boolean undefined oncheckedchange function name oncheckedchange description event handler called when the switch is activated or deactivated type checked boolean eventdetails switch root changeeventdetails void undefined value string name value description the value submitted with the form when the switch is on by default switch submits the on value matching native checkbox behavior type string undefined form string name form description identifies the form that owns the hidden input useful when the switch is rendered outside the form type string undefined nativebutton boolean false name nativebutton description whether the component renders a native button element when replacing it via the render prop set to true if the rendered element is a native button type boolean undefined default false uncheckedvalue string name uncheckedvalue description the value submitted with the form when the switch is off by default unchecked switches do not submit any value matching native checkbox behavior type string undefined disabled boolean false name disabled description whether the component should ignore user interaction type boolean undefined default false readonly boolean false name readonly description whether the user should be unable to activate or deactivate the switch type boolean undefined default false required boolean false name required description whether the user must activate the switch before submitting a form type boolean undefined default false inputref react ref htmlinputelement name inputref description a ref to access the hidden input element type react ref htmlinputelement undefined id string name id description the id of the hidden input element when nativebutton is true the id is applied to the root element type string undefined classname string function name classname description css class applied to the element or a function that returns a class based on the component s state type string state switch root state string undefined undefined style react cssproperties function name style description style applied to the element or a function that returns a style object based on the component s state type react cssproperties state switch root state react cssproperties undefined undefined render reactelement function name render description allows you to replace the component s html element with a different tag or compose it with another component accepts a reactelement or a function that returns the element to render type reactelement props htmlprops state switch root state reactelement undefined attribute data checked present when the switch is checked data unchecked present when the switch is not checked data disabled present when the switch is disabled data readonly present when the switch is readonly data required present when the switch is required data valid present when the switch is in a valid state when wrapped in field root data invalid present when the switch is in an invalid state when wrapped in field root data dirty present when the switch s value has changed when wrapped in field root data touched present when the switch has been touched when wrapped in field root data filled present when the switch is active when wrapped in field root data focused present when the switch is focused when wrapped in field root attribute description data checked present when the switch is checked data unchecked present when the switch is not checked data disabled present when the switch is disabled data readonly present when the switch is readonly data required present when the switch is required data valid present when the switch is in a valid state when wrapped in field root data invalid present when the switch is in an invalid state when wrapped in field root data dirty present when the switch s value has changed when wrapped in field root data touched present when the switch has been touched when wrapped in field root data filled present when the switch is active when wrapped in field root data focused present when the switch is focused when wrapped in field root switch root props hide re export of root props as switchrootprops switch root state hide type switchrootstate whether the switch is currently active checked boolean whether the component should ignore user interaction disabled boolean whether the user should be unable to activate or deactivate the switch readonly boolean whether the user must activate the switch before submitting a form required boolean whether the field has been touched touched boolean whether the field value has changed from its initial value dirty boolean whether the field is valid valid boolean null whether the field has a value filled boolean whether the field is focused focused boolean switch root changeeventreason hide type switchrootchangeeventreason none switch root changeeventdetails hide type switchrootchangeeventdetails the reason for the event reason none the native event associated with the custom event event event cancels base ui from handling the event cancel void allows the event to propagate in cases where base ui will stop the propagation allowpropagation void indicates whether the event has been canceled iscanceled boolean indicates whether the event is allowed to propagate ispropagationallowed boolean the element that triggered the event if applicable trigger element undefined thumb the movable part of the switch that indicates whether the switch is on or off renders a span component props table prop type default classname string function name classname description css class applied to the element or a function that returns a class based on the component s state type string state switch thumb state string undefined undefined style react cssproperties function name style description style applied to the element or a function that returns a style object based on the component s state type react cssproperties state switch thumb state react cssproperties undefined undefined render reactelement function name render description allows you to replace the component s html element with a different tag or compose it with another component accepts a reactelement or a function that returns the element to render type reactelement props htmlprops state switch thumb state reactelement undefined attribute data checked present when the switch is checked data unchecked present when the switch is not checked data disabled present when the switch is disabled data readonly present when the switch is readonly data required present when the switch is required data valid present when the switch is in a valid state when wrapped in field root data invalid present when the switch is in an invalid state when wrapped in field root data dirty present when the switch s value has changed when wrapped in field root data touched present when the switch has been touched when wrapped in field root data filled present when the switch is active when wrapped in field root data focused present when the switch is focused when wrapped in field root attribute description data checked present when the switch is checked data unchecked present when the switch is not checked data disabled present when the switch is disabled data readonly present when the switch is readonly data required present when the switch is required data valid present when the switch is in a valid state when wrapped in field root data invalid present when the switch is in an invalid state when wrapped in field root data dirty present when the switch s value has changed when wrapped in field root data touched present when the switch has been touched when wrapped in field root data filled present when the switch is active when wrapped in field root data focused present when the switch is focused when wrapped in field root switch thumb props hide re export of thumb props as switchthumbprops switch thumb state hide type switchthumbstate whether the switch is currently active checked boolean whether the component should ignore user interaction disabled boolean whether the user should be unable to activate or deactivate the switch readonly boolean whether the user must activate the switch before submitting a form required boolean whether the field has been touched touched boolean whether the field value has changed from its initial value dirty boolean whether the field is valid valid boolean null whether the field has a value filled boolean whether the field is focused focused boolean