//
A set of checkable buttons, known as radio buttons.
bun add xiod-ui1import {2 Radio,3 RadioGroup,4 RadioGroupItem,5 RadioItem6} from "xiod-ui/radio";1<Radio>2 <RadioGroup>3 <RadioGroupItem />4 <RadioItem />5 </RadioGroup>6</Radio>| Prop | Type | Default | Description |
|---|---|---|---|
disabled | boolean| undefined | false | Whether the component should ignore user interaction. |
readOnly | boolean| undefined | false | Whether the user should be unable to select a different radio button in the group. |
required | boolean| undefined | false | Whether the user must choose a value before submitting a form. |
name | string| undefined | - | Identifies the field when a form is submitted. |
form | string| undefined | - | Identifies the form that owns the radio inputs. Useful when the radio group is rendered outside the form. |
value | any | - | The controlled value of the radio item that should be currently selected. To render an uncontrolled radio group, use the `defaultValue` prop instead. |
defaultValue | any | - | The uncontrolled value of the radio button that should be initially selected. To render a controlled radio group, use the `value` prop instead. |
onValueChange | ((value: any, eventDetails: { reason: "none"; event: Event; cancel: () => void; allowPropagation: () => void; isCanceled: boolean; isPropagationAllowed: boolean; trigger: Element| undefined; }) => void)| undefined | - | Callback fired when the value changes. |
inputRef | Ref<HTMLInputElement>| undefined | - | A ref to access the hidden input element. |
style | CSSProperties| ((state: RadioGroupState) => CSSProperties| undefined)| undefined | - | Style applied to the element, or a function that returns a style object based on the component's state. |
className | string| ((state: RadioGroupState) => string| undefined)| undefined | - | CSS class applied to the element, or a function that returns a class based on the component's state. |
render | ReactElement<unknown, string| JSXElementConstructor<any>>| ComponentRenderFn<HTMLProps, RadioGroupState>| undefined | - | 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. |
| Prop | Type | Default | Description |
|---|---|---|---|
valueReq | any | - | The unique identifying value of the radio in a group. |
disabled | boolean| undefined | - | Whether the component should ignore user interaction. |
required | boolean| undefined | - | Whether the user must choose a value before submitting a form. |
readOnly | boolean| undefined | - | Whether the user should be unable to select the radio button. |
inputRef | Ref<HTMLInputElement>| undefined | - | A ref to access the hidden input element. |
nativeButton | boolean| undefined | true | Whether the component renders a native `<button>` element when replacing it via the `render` prop. Set to `false` if the rendered element is not a button (for example, `<div>`). |
style | CSSProperties| ((state: RadioRootState) => CSSProperties| undefined)| undefined | - | Style applied to the element, or a function that returns a style object based on the component's state. |
className | string| ((state: RadioRootState) => string| undefined)| undefined | - | CSS class applied to the element, or a function that returns a class based on the component's state. |
render | ReactElement<unknown, string| JSXElementConstructor<any>>| ComponentRenderFn<HTMLProps, RadioRootState>| undefined | - | 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. |
variant | "default"| "expressive"| "sharp"| "diamond"| null| undefined | default |