Prezentare generală
SegmentedControl este o presetare alcătuită din Radio și RadioGroup, cu opțiuni alăturate. Utilizați-l pentru o alegere scurtă, reciproc exclusivă. Pentru navigarea între panouri de conținut, utilizați Tabs.
Utilizare
Furnizați un nume de grup accesibil folosindaria-label sau aria-labelledby. Fiecare opțiune necesită o valoare de tip șir unică în value. Selecția aparține grupului; opțiunile nu au o stare de bifare independentă.
defaultValue inițializează selecția. Grupul gestionează modificările ulterioare. Adăugați onValueChange dacă trebuie să le observați fără a controla valoarea.
Stare controlată
value în starea aplicației și actualizați-o în onValueChange. Nu combinați value și defaultValue și nu schimbați modurile de gestionare după montare.
Opțiuni de pictograme
aria-label. startIcon este decorativ și ascuns tehnologiei asistive. Opțiunile cu text vizibil utilizează label și pot oferi, de asemenea, startIcon. Setați disabled pentru o opțiune ca să împiedicați selectarea acesteia sau pentru grup ca să dezactivați fiecare opțiune.
Tastatură, formulare și direcție
Tab intră în grup; tastele săgeată se deplasează între opțiunile activate și actualizează selecția. Acest lucru urmează comportamentul butoanelor radio. Grupurile de selectare din listele derulante mută focalizarea cu tastele săgeată și selectează la activare.itemWidth="equal" este implicit; utilizați content când etichetele ar trebui să determine lățimile. Setați name pentru a include valoarea selectată în trimiterea formularului nativ. Presetarea păstrează starea required, readOnly și disabled a RadioGroup, precum și integrarea cu formularele native. onValueChange primește valoarea selectată și detaliile evenimentului Base UI, inclusiv reason și cancel().
Pentru conținut de la dreapta la stânga, asociați DirectionProvider cu un atribut dir corespunzător. Furnizorul controlează interacțiunea direcțională; dir controlează aspectul documentului.
Compoziție și proprietăți native
Proprietățile native,className, style, render și ref vizează div-ul grupului. Utilizați render pentru a compune acel grup cu un alt element; păstrați-i numele accesibil și semantica de grup de butoane radio. Opțiunile redau elemente span cu role="radio" și intrări radio native ascunse. Presetarea nu atribuie roluri de filă sau panou de filă. Pentru conținut radio personalizat, proprietăți native pentru fiecare opțiune sau o țintă de redare radio diferită, compuneți direct Radio.Root și RadioGroup.
Proprietăți
string
obligatoriu
Accessible group name. Supply this or
aria-labelledby.string
obligatoriu
ID of an element that labels the group. Supply this or
aria-label.string | ((state: RadioGroupState) => string | undefined)
CSS class applied to the element, or a function that
returns a class based on the component’s state.
string
The uncontrolled value of the radio button that should be initially selected.To render a controlled radio group, use the
value prop instead.boolean
implicit:"false"
Whether the component should ignore user interaction.
string
Identifies the form that owns the radio inputs.
Useful when the radio group is rendered outside the form.
boolean
implicit:"false"
Stretch the control to the width of its container.
Ref<HTMLInputElement>
A ref to access the hidden input element.
"content" | "equal"
implicit:"equal"
Use equal-width options or size each option to its content.
string
Identifies the field when a form is submitted.
((value: TValue, eventDetails: { reason: "none"; event: Event; cancel: () => void; allowPropagation: () => void; isCanceled: boolean; isPropagationAllowed: boolean; trigger: Element | undefined; }) => void)
Callback fired when the value changes.
readonly SegmentedControlOption<TValue>[]
obligatoriu
Options with a unique string
value, a label or startIcon, and optional disabled. Icon-only options require an aria-label.boolean
implicit:"false"
Whether the user should be unable to select a different radio button in the group.
ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, RadioGroupState>
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.boolean
implicit:"false"
Whether the user must choose a value before submitting a form.
"md" | "sm"
implicit:"md"
Control height:
sm (24px) or md (32px).CSSProperties | ((state: RadioGroupState) => CSSProperties | undefined)
Style applied to the element, or a function that
returns a style object based on the component’s state.
string
The controlled value of the radio item that should be currently selected.To render an uncontrolled radio group, use the
defaultValue prop instead."rectangle" | "round"
implicit:"round"
Shape:
round is a pill, rectangle fills its container with form-field corners.