Meta tags:
description=A high-quality, unstyled React radio button component that is easy to style.;
keywords=React Radio Button,Radio Group Component,Radio Button,Radio Input,Single Choice,Exclusive Choice,Mutually Exclusive,Option Selector,Option Button,Form Radio Control,Accessible Radio Group,Customizable Radio,Headless React Components,Base UI;

Headings (most frequently used words):

radio, radiogroup, root, indicator, propshide, statehide, usage, guidelines, anatomy, examples, api, reference, labeling, group, rendering, as, native, button, form, integration, changeeventreasonhide, changeeventdetailshide,

Text of the page (most frequently used words):
the (151), radio (133), when (90), root (61), field (55), present (50), data (50), type (45), boolean (44), value (42), state (38), whether (37), wrapped (34), #button (33), undefined (31), name (29), description (28), label (27), radiogroup (25), element (24), component (23), group (21), indicator (20), function (20), react (20), disabled (19), has (18), form (18), checked (18), render (17), classname (17), style (16), required (15), user (15), readonly (15), focused (14), valid (14), touched (14), that (13), string (13), should (12), props (12), reactelement (12), storage (12), ssd (12), styles (12), div (11), from (10), with (10), false (10), default (10), event (10), invalid (9), returns (9), cssproperties (9), been (8), hide (8), native (8), item (8), filled (7), dirty (7), changed (7), css (7), and (7), base (7), fieldset (7), import (7), must (6), select (6), attribute (6), applied (6), based (6), class (6), prop (6), ref (6), defaultvalue (6), using (6), aria (6), labelledby (6), apple (6), before (5), submitting (5), unable (5), ignore (5), interaction (5), selected (5), html (5), different (5), renders (5), input (5), labeling (5), choose (4), export (4), animating (4), not (4), unchecked (4), allows (4), htmlinputelement (4), hidden (4), inputref (4), nativebutton (4), use (4), fuji (4), null (3), its (3), initial (3), currently (3), htmlprops (3), accepts (3), you (3), replace (3), tag (3), compose (3), another (3), object (3), table (3), indicates (3), span (3), void (3), for (3), callback (3), integration (3), labels (3), sibling (3), enclosing (3), rendering (3), anatomy (3), components (3), gala (3), granny (3), smith (3), index (3), menu (3), transitionstatus (2), out (2), ending (2), starting (2), keepmounted (2), access (2), rendered (2), propagate (2), reason (2), none (2), changeeventdetails (2), within (2), identifies (2), outside (2), onvaluechange (2), uncontrolled (2), instead (2), controlled (2), buttons (2), api (2), reference (2), legend (2), hdd (2), buttonprops (2), placed (2), htmlfor (2), pattern (2), each (2), examples (2), forms (2), usage (2), guidelines (2), best (2), module (2), stackblitz (2), modules (2), view (2), provider (2), toggle (2), navigation (2), dialog (2), checkbox (2), transition, status, radioindicatorstate, radioindicatorprops, keep, dom, inactive, radiorootstate, radiorootprops, replacing, via, set, true, unique, identifying, represents, itself, beside, trigger, triggered, applicable, ispropagationallowed, allowed, iscanceled, canceled, allowpropagation, cases, where, will, stop, propagation, cancel, cancels, handling, associated, custom, radiogroupchangeeventdetails, radiogroupchangeeventreason, changeeventreason, tick, radiogroupstate, radiogroupprops, owns, inputs, useful, eventdetails, fired, changes, initially, submitted, provides, shared, series, storagetype, wrapping, are, supported, avoid, support, prefer, simplest, always, place, them, together, can, created, elements, see, guide, controls, have, accessible, show, code, exampleradiogroup, const, useid, return, caption, client, tsx, source, markdown, easily, stylable, top, npm, github, userender, mergeprops, direction, csp, utils, tooltip, toolbar, toast, tabs, switch, slider, separator, scroll, area, progress, preview, card, popover, otp, new, number, meter, menubar, drawer, context, combobox, collapsible, avatar, autocomplete, alert, accordion, llms, txt, typescript, customization, composition, animation, styling, handbook, about, community, releases, accessibility, quick, start, overview, search, skip, contents,

Text of the page (random words):
utton 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 radio top usage guidelines anatomy examples labeling a radio group rendering as a native button form integration api reference radiogroup root indicator radio an easily stylable radio button component view as markdown view source best apple fuji gala granny smith index tsx index module css css modules stackblitz css modules stackblitz use client import as react from react import radio from base ui react radio import radiogroup from base ui react radio group import styles from index module css export default function exampleradiogroup const id react useid return radiogroup aria labelledby id defaultvalue fuji apple classname styles radiogroup div classname styles caption id id best apple div label classname styles item radio root value fuji apple classname styles radio radio indicator classname styles indicator radio root fuji label label classname styles item radio root value gala apple classname styles radio radio indicator classname styles indicator radio root gala label label classname styles item radio root value granny smith apple classname styles radio radio indicator classname styles indicator radio root granny smith label radiogroup show code usage guidelines form controls must have an accessible name it can be created using label elements or the field and fieldset components see labeling a radio group and the forms guide anatomy radio is always placed within radio group import the components and place them together anatomy import radio from base ui react radio import radiogroup from base ui react radio group radiogroup radio root radio indicator radio root radiogroup examples labeling a radio group label the group with aria labelledby and a sibling label element using aria labelledby to label a radio group div id storage type label storage type div radiogroup aria labelledby storage type label radiogroup an enclosing label is the simplest labeling pattern for each radio using an enclosing label to label a radio button label radio root value ssd ssd label rendering as a native button by default radio root renders a span element to support enclosing labels prefer rendering each radio as a native button when using sibling labels htmlfor id sibling label pattern with a native button div id storage type storage type div radiogroup defaultvalue ssd aria labelledby storage type div label htmlfor storage type ssd ssd label radio root value ssd id storage type ssd nativebutton render button radio indicator radio root div radiogroup 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 div id storage type storage type div radiogroup defaultvalue ssd aria labelledby storage type radio root value ssd nativebutton render buttonprops label button buttonprops ssd label radiogroup form integration use field and fieldset for group labeling and form integration using radio group in a form form field root name storagetype fieldset root render radiogroup fieldset legend storage type fieldset legend field item field label radio root value ssd ssd field label field item field item field label radio root value hdd hdd field label field item fieldset root field root form api reference radiogroup provides a shared state to a series of radio buttons renders a div element component props table prop type default name string name name description identifies the field when a form is submitted type string undefined defaultvalue value name defaultvalue description the uncontrolled value of the radio button that should be initially selected to render a controlled radio group use the value prop instead type value undefined value value name value description the controlled value of the radio item that should be currently selected to render an uncontrolled radio group use the defaultvalue prop instead type value undefined onvaluechange function name onvaluechange description callback fired when the value changes type value value eventdetails radiogroup changeeventdetails void undefined form string name form description identifies the form that owns the radio inputs useful when the radio group is rendered outside the form 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 select a different radio button in the group type boolean undefined default false required boolean false name required description whether the user must choose a value 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 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 radiogroup 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 radiogroup 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 radiogroup state reactelement undefined attribute data disabled present when the radio group is disabled attribute description data disabled present when the radio group is disabled radiogroup props hide re export of radiogroup props as radiogroupprops radiogroup state hide type radiogroupstate whether the user should be unable to select a different radio button in the group readonly boolean whether the user must tick a radio button within the group before submitting a form required boolean whether the component should ignore user interaction disabled 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 radiogroup changeeventreason hide type radiogroupchangeeventreason none radiogroup changeeventdetails hide type radiogroupchangeeventdetails 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 root represents the radio button itself renders a span element and a hidden input beside component props table prop type default value value name value description the unique identifying value of the radio in a group type value 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 disabled boolean name disabled description whether the component should ignore user interaction type boolean undefined readonly boolean name readonly description whether the user should be unable to select the radio button type boolean undefined required boolean name required description whether the user must choose a value before submitting a form type boolean undefined inputref react ref htmlinputelement name inputref description a ref to access the hidden input element type react ref htmlinputelement 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 radio 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 radio 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 radio root state reactelement undefined attribute data checked present when the radio is checked data unchecked present when the radio is not checked data disabled present when the radio is disabled data readonly present when the radio is readonly data required present when the radio is required data valid present when the radio is in a valid state when wrapped in field root data invalid present when the radio is in an invalid state when wrapped in field root data dirty present when the radio s value has changed when wrapped in field root data touched present when the radio has been touched when wrapped in field root data filled present when the radio is checked when wrapped in field root data focused present when the radio is focused when wrapped in field root attribute description data checked present when the radio is checked data unchecked present when the radio is not checked data disabled present when the radio is disabled data readonly present when the radio is readonly data required present when the radio is required data valid present when the radio is in a valid state when wrapped in field root data invalid present when the radio is in an invalid state when wrapped in field root data dirty present when the radio s value has changed when wrapped in field root data touched present when the radio has been touched when wrapped in field root data filled present when the radio is checked when wrapped in field root data focused present when the radio is focused when wrapped in field root radio root props hide re export of root props as radiorootprops radio root state hide type radiorootstate whether the radio button is currently selected checked boolean whether the component should ignore user interaction disabled boolean whether the user should be unable to select the radio button readonly boolean whether the user must choose a value before submitting a form required boolean whether the radio button has been touched when wrapped in field root touched boolean whether the radio button s value has changed from its initial value when wrapped in field root dirty boolean whether the radio button is in a valid state when wrapped in field root valid boolean null whether the radio button has a value when wrapped in field root filled boolean whether the radio button is focused when wrapped in field root focused boolean indicator indicates whether the radio button is selected renders a span element 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 radio indicator 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 radio indicator state react cssproperties undefined undefined keepmounted boolean false name keepmounted description whether to keep the html element in the dom when the radio button is inactive type boolean undefined default false 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 radio indicator state reactelement undefined attribute data checked present when the radio is checked data unchecked present when the radio is not checked data disabled present when the radio is disabled data readonly present when the radio is readonly data required present when the radio is required data valid present when the radio is in a valid state when wrapped in field root data invalid present when the radio is in an invalid state when wrapped in field root data dirty present when the radio s value has changed when wrapped in field root data touched present when the radio has been touched when wrapped in field root data filled present when the radio is checked when wrapped in field root data focused present when the radio is focused when wrapped in field root data starting style present when the radio indicator is animating in data ending style present when the radio indicator is animating out attribute description data checked present when the radio is checked data unchecked present when the radio is not checked data disabled present when the radio is disabled data readonly present when the radio is readonly data required present when the radio is required data valid present when the radio is in a valid state when wrapped in field root data invalid present when the radio is in an invalid state when wrapped in field root data dirty present when the radio s value has changed when wrapped in field root data touched present when the radio has been touched when wrapped in field root data filled present when the radio is checked when wrapped in field root data focused present when the radio is focused when wrapped in field root data starting style present when the radio indicator is animating in data ending style present when the radio indicator is animating out radio indicator props hide re export of indicator props as radioindicatorprops radio indicator state hide type radioindicatorstate the transition status of the component transitionstatus transitionstatus whether the radio button is currently selected checked boolean whether the component should ignore user interaction disabled boolean whether the user should be unable to select the radio button readonly boolean whether the user must choose a value before submitting a form required boolean whether the radio button has been touched when wrapped in field root touched boolean whether the radio button s value has changed from its initial value when wrapped in field root dirty boolean whether the radio button is in a valid state when wra...