mirror of
https://github.com/cosscom/coss.git
synced 2026-09-14 20:06:50 +08:00
pasqualevitiello
98 lines
2.0 KiB
Plaintext
98 lines
2.0 KiB
Plaintext
---
|
||
title: Radio Group
|
||
description: A set of checkable buttons where no more than one of the buttons can be checked at a time.
|
||
|
||
links:
|
||
doc: https://base-ui.com/react/components/radio-group#api-reference
|
||
---
|
||
|
||
<ComponentPreview name="radio-group-demo" />
|
||
|
||
## Installation
|
||
|
||
<CodeTabs>
|
||
|
||
<TabsList>
|
||
<TabsTab value="cli">CLI</TabsTab>
|
||
<TabsTab value="manual">Manual</TabsTab>
|
||
</TabsList>
|
||
<TabsPanel value="cli">
|
||
|
||
```bash
|
||
npx shadcn@latest add @coss/radio-group
|
||
```
|
||
|
||
</TabsPanel>
|
||
|
||
<TabsPanel value="manual">
|
||
|
||
<Steps>
|
||
|
||
<Step>Install the following dependencies:</Step>
|
||
|
||
```bash
|
||
npm install @base-ui-components/react
|
||
```
|
||
|
||
<Step>Copy and paste the following code into your project.</Step>
|
||
|
||
<ComponentSource name="radio-group" title="components/ui/radio-group.tsx" />
|
||
|
||
<Step>Update the import paths to match your project setup.</Step>
|
||
|
||
</Steps>
|
||
|
||
</TabsPanel>
|
||
|
||
</CodeTabs>
|
||
|
||
## Usage
|
||
|
||
```tsx
|
||
import { Label } from "@/components/ui/label"
|
||
import { Radio, RadioGroup } from "@/components/ui/radio-group"
|
||
```
|
||
|
||
```tsx
|
||
<RadioGroup defaultValue="next">
|
||
<Label>
|
||
<Radio value="next" /> Next.js
|
||
</Label>
|
||
<Label>
|
||
<Radio value="vite" /> Vite
|
||
</Label>
|
||
<Label>
|
||
<Radio value="astro" /> Astro
|
||
</Label>
|
||
</RadioGroup>
|
||
```
|
||
|
||
## Examples
|
||
|
||
For accessible labelling and validation, prefer using the `Field` component to wrap radio buttons. See the related example: [Radio Group field](/ui/docs/components/field#radio-group-field).
|
||
|
||
### Disabled
|
||
|
||
<ComponentPreview name="radio-group-disabled" />
|
||
|
||
### With Description
|
||
|
||
<ComponentPreview name="radio-group-with-description" />
|
||
|
||
### Card Style
|
||
|
||
<ComponentPreview name="radio-group-card" />
|
||
|
||
### Form Integration
|
||
|
||
<ComponentPreview name="radio-group-form" />
|
||
|
||
## Comparing with Radix / shadcn
|
||
|
||
If you’re already familiar with Radix UI and shadcn/ui, this guide highlights the small differences and similarities so you can get started with **coss ui** quickly.
|
||
|
||
### Quick Checklist
|
||
|
||
- Use `Radio` going forward; `RadioGroupItem` remains for legacy
|
||
- If you used `asChild` on parts, switch to the `render` prop
|