RadioGroup
<ts-radio-group> vv0.6.3
The ts-radio-group component.
Open in Storybook for interactive demos.
Preview
Section titled “Preview”<ts-radio-group orientation="vertical" size="md">Content</ts-radio-group>Properties
Section titled “Properties”| Property | Attribute | Type | Default | Description |
|---|---|---|---|---|
disabled | disabled | boolean | false | Disables all child radios. |
error | error | string | undefined | — | Error message displayed below the group. |
label | label | string | undefined | — | Accessible label for the group. |
name | name | string | undefined | — | Shared name for all child radios. |
orientation | orientation | "horizontal" | "vertical" | 'vertical' | Layout direction of the radios. |
size | size | "lg" | "md" | "sm" | 'md' | Size for all child radios. |
value | value | string | undefined | — | The currently selected value. |
Events
Section titled “Events”| Event | Detail | Bubbles | Composed | Description |
|---|---|---|---|---|
tsChange | \{ value: string; \} | Yes | Yes | Emitted when the selected value changes. |
| Name | Description |
|---|---|
*(default)* | Radio buttons to group. |
CSS Parts
Section titled “CSS Parts”Use ::part() to style internal elements:
| Part | Description |
|---|---|
error-text | The error message wrapper. |
group | The group container. |
label | The group label. |
ts-radio-group::part(error-text) { /* your custom styles */}<ts-radio-group orientation="vertical" size="md">Content</ts-radio-group>import { TsRadioGroup } from '@tessera-ui/react';
<TsRadioGroup orientation="vertical" size="md">Content</TsRadioGroup>