Comparación entre la versión Astro (Saastro) y React (shadcn/ui)
🚀 saastro/ui (Astro)
⚛️ shadcn/ui (React)
Installation
Usage
---
import { Switch } from "@/components/ui-saastro/switch"
import { Label } from "@/components/ui-saastro/label"
---
<div class="flex items-center space-x-2">
<Switch id="airplane-mode" />
<Label for="airplane-mode">Airplane Mode</Label>
</div>Examples
Default
<Switch />Checked by Default
<Switch checked />Disabled
<Switch disabled />With Form
<form>
<div class="flex items-center space-x-2">
<Switch id="marketing" name="marketing" />
<Label for="marketing">Receive marketing emails</Label>
</div>
</form>Props
| Prop | Type | Default | Description |
|---|---|---|---|
checked | boolean | false | Whether the switch is checked |
disabled | boolean | false | Whether the switch is disabled |
id | string | - | The id for the underlying input |
name | string | - | The name for form submission |
class | string | - | Additional CSS classes |
Accessibility
- Uses native checkbox input for built-in accessibility
- Visually styled as a switch toggle
- Supports keyboard navigation (Space to toggle)
- Properly conveys checked state to screen readers