79 lines
2.3 KiB
Plaintext
79 lines
2.3 KiB
Plaintext
|
# Radio
|
||
|
|
|
||
|
|
Radio wraps Base UI's radio primitive with the Tailwind classes from the official Base UI example.
|
||
|
|
|
||
|
|
::example{src="components/radio/radio.tsx"}
|
||
|
|
|
||
|
|
## Anatomy
|
||
|
|
|
||
|
|
### Base UI Style
|
||
|
|
|
||
|
|
```tsx
|
||
|
|
import { RadioGroup } from "@base-ui/react/radio-group"
|
||
|
|
import Radio from "@/components/ui/radio"
|
||
|
|
|
||
|
|
function ExampleRadioGroup() {
|
||
|
|
const id = React.useId()
|
||
|
|
|
||
|
|
return (
|
||
|
|
<RadioGroup aria-labelledby={id} defaultValue="fuji-apple" className="flex flex-col items-start gap-1">
|
||
|
|
<div id={id} className="text-sm font-bold">Best apple</div>
|
||
|
|
<label className="flex items-center gap-2 text-sm">
|
||
|
|
<Radio.Root value="fuji-apple">
|
||
|
|
<Radio.Indicator />
|
||
|
|
</Radio.Root>
|
||
|
|
Fuji
|
||
|
|
</label>
|
||
|
|
</RadioGroup>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
```
|
||
|
|
|
||
|
|
### Shadcn Style
|
||
|
|
|
||
|
|
```tsx
|
||
|
|
import { Radio, RadioIndicator } from "@/components/ui/radio"
|
||
|
|
|
||
|
|
<Radio value="fuji-apple">
|
||
|
|
<RadioIndicator />
|
||
|
|
</Radio>
|
||
|
|
```
|
||
|
|
|
||
|
|
## Composition
|
||
|
|
|
||
|
|
Use the following composition to build `Radio`:
|
||
|
|
|
||
|
|
```txt
|
||
|
|
Radio
|
||
|
|
└── RadioIndicator
|
||
|
|
```
|
||
|
|
|
||
|
|
|
||
|
|
## API Reference
|
||
|
|
|
||
|
|
Official API: [Base UI Radio API](https://base-ui.com/react/components/radio#api-reference).
|
||
|
|
|
||
|
|
This wrapper preserves the underlying Base UI Radio API. Styled parts forward `className`, `style`, and `render` where Base UI supports them.
|
||
|
|
|
||
|
|
### Root
|
||
|
|
|
||
|
|
`Radio` exposes the corresponding Base UI part with the wrapper's Tailwind styles.
|
||
|
|
|
||
|
|
| Prop | Type | Default | Description |
|
||
|
|
| --- | --- | --- | --- |
|
||
|
|
| `defaultValue` / `defaultOpen` | `any` | - | Initial uncontrolled value or open state when supported. |
|
||
|
|
| `value` / `open` | `any` | - | Controlled value or open state when supported. |
|
||
|
|
| `onValueChange` / `onOpenChange` | `function` | - | Called when controlled state changes. |
|
||
|
|
| `children` | `React.ReactNode` | - | Child parts rendered inside the root. |
|
||
|
|
|
||
|
|
### Indicator
|
||
|
|
|
||
|
|
`Radio.Indicator` exposes the corresponding Base UI part with the wrapper's Tailwind styles.
|
||
|
|
|
||
|
|
| Prop | Type | Default | Description |
|
||
|
|
| --- | --- | --- | --- |
|
||
|
|
| `className` | `string \| (state) => string` | - | Classes for the part state. |
|
||
|
|
| `style` | `React.CSSProperties \| (state) => React.CSSProperties` | - | Inline style or state-based style. |
|
||
|
|
| `render` | `ReactElement \| (props, state) => ReactElement` | - | Replaces the rendered element when supported. |
|
||
|
|
| `children` | `React.ReactNode` | - | Child content when the part accepts children. |
|