Radio renders a styled <input type='radio'> that integrates with Django form field groups. Match colour and size variants to adjacent checkboxes and inputs for visual consistency.
Basic Radio
<div class="flex gap-2">
<c-lb.radio name="radio-1" checked="checked" />
<c-lb.radio name="radio-1" />
</div>
Color Variants
<div class="flex flex-col gap-2">
<c-lb.radio name="radio-v" variant="neutral" checked="checked" />
<c-lb.radio name="radio-v" variant="primary" />
<c-lb.radio name="radio-v" variant="secondary" />
<c-lb.radio name="radio-v" variant="accent" />
<c-lb.radio name="radio-v" variant="info" />
<c-lb.radio name="radio-v" variant="success" />
<c-lb.radio name="radio-v" variant="warning" />
<c-lb.radio name="radio-v" variant="error" />
</div>
Sizes
<div class="flex items-center gap-2">
<c-lb.radio name="radio-s" variant="primary" size="xs" checked="checked" />
<c-lb.radio name="radio-s" variant="primary" size="sm" />
<c-lb.radio name="radio-s" variant="primary" size="md" />
<c-lb.radio name="radio-s" variant="primary" size="lg" />
<c-lb.radio name="radio-s" variant="primary" size="xl" />
</div>
API Reference
c-lb.radio
| Property | Type | Default | Required | Description |
|---|---|---|---|---|
| class | string | - | No | Additional CSS classes to apply |
| variant |
neutral
primary
secondary
accent
info
success
warning
error
|
- | No | Radio color variant |
| size |
xs
sm
md
lg
xl
|
md
|
No | Radio size |
| validate | boolean |
False
|
No | Enable validation styling |