mirror of
https://github.com/cloud-shuttle/leptos-shadcn-ui.git
synced 2026-05-24 23:40:40 +00:00
143 lines
2.9 KiB
Markdown
143 lines
2.9 KiB
Markdown
# Radio Group Component API
|
|
|
|
A set of radio buttons for single selection from multiple options.
|
|
|
|
---
|
|
|
|
## Installation
|
|
|
|
```toml
|
|
# Cargo.toml
|
|
[dependencies]
|
|
shadcn-ui-leptos-radio-group = "0.7"
|
|
```
|
|
|
|
```rust
|
|
use shadcn_ui_leptos_radio_group::RadioGroup;
|
|
```
|
|
|
|
---
|
|
|
|
## Import
|
|
|
|
```rust
|
|
use shadcn_ui_leptos_radio_group::{
|
|
RadioGroup,
|
|
RadioGroupItem
|
|
};
|
|
```
|
|
|
|
---
|
|
|
|
## Component API
|
|
|
|
### RadioGroup
|
|
|
|
Root container managing radio state.
|
|
|
|
| Prop | Type | Default | Description |
|
|
|------|------|---------|-------------|
|
|
| `value` | `Signal<String>` | **Required** | Selected value |
|
|
| `on_change` | `Option<Callback<String>>` | `None` | Change handler |
|
|
| `disabled` | `Signal<bool>` | `false` | Disable group |
|
|
| `name` | `MaybeProp<String>` | `None` | Form field name |
|
|
|
|
### RadioGroupItem
|
|
|
|
Individual radio option.
|
|
|
|
| Prop | Type | Default | Description |
|
|
|------|------|---------|-------------|
|
|
| `value` | `String` | **Required** | Option value |
|
|
| `disabled` | `Signal<bool>` | `false` | Disable option |
|
|
| `id` | `MaybeProp<String>` | `None` | Unique identifier |
|
|
|
|
---
|
|
|
|
## Usage Examples
|
|
|
|
### Basic Radio Group
|
|
|
|
```rust
|
|
use leptos::prelude::*;
|
|
use shadcn_ui_leptos_radio_group::*;
|
|
|
|
#[component]
|
|
pub fn MyComponent() -> impl IntoView {
|
|
let (selected, set_selected) = signal("default".to_string());
|
|
|
|
view! {
|
|
<RadioGroup
|
|
value=selected.into()
|
|
on_change=Some(Callback::new(move |v| set_selected.set(v)))
|
|
name="notification"
|
|
>
|
|
<div class="flex items-center space-x-2">
|
|
<RadioGroupItem value="default" id="r1" />
|
|
<label for="r1">"Default"</label>
|
|
</div>
|
|
<div class="flex items-center space-x-2">
|
|
<RadioGroupItem value="compact" id="r2" />
|
|
<label for="r2">"Compact"</label>
|
|
</div>
|
|
</RadioGroup>
|
|
}
|
|
}
|
|
```
|
|
|
|
---
|
|
|
|
## CSS Classes
|
|
|
|
```css
|
|
.radio-group-item {
|
|
aspect-square h-4 w-4 rounded-full border
|
|
border-primary text-primary ring-offset-background
|
|
focus:outline-none focus:ring-2 focus:ring-ring
|
|
focus:ring-offset-2 disabled:cursor-not-allowed
|
|
disabled:opacity-50
|
|
}
|
|
|
|
.radio-group-item[data-state=checked] {
|
|
border-primary text-primary
|
|
}
|
|
```
|
|
|
|
---
|
|
|
|
## Accessibility
|
|
|
|
### Keyboard Navigation
|
|
|
|
| Key | Action |
|
|
|-----|--------|
|
|
| **Arrow Keys** | Navigate options |
|
|
| **Space** | Select option |
|
|
|
|
---
|
|
|
|
## TypeScript API
|
|
|
|
```typescript
|
|
interface RadioGroupProps {
|
|
value: string;
|
|
onChange?: (value: string) => void;
|
|
disabled?: boolean;
|
|
name?: string;
|
|
children?: React.ReactNode;
|
|
}
|
|
|
|
interface RadioGroupItemProps {
|
|
value: string;
|
|
disabled?: boolean;
|
|
id?: string;
|
|
}
|
|
|
|
export const RadioGroup: React.FC<RadioGroupProps>;
|
|
export const RadioGroupItem: React.FC<RadioGroupItemProps>;
|
|
```
|
|
|
|
---
|
|
|
|
*Source: [packages/leptos/radio-group/src/default.rs](https://github.com/yourusername/leptos-shadcn-ui/blob/main/packages/leptos/radio-group/src/default.rs)*
|