Component
Radio
One choice in a group.
Classes
| Class | Type | |
|---|---|---|
| radio | Component | The label. |
| radio-ring | Part | The ring. The dot inside it keeps the noise. |
| radio-sm | Size | Small. |
| radio-lg | Size | Large. |
| primary | Color | Indigo by default. Used when you set no color. |
| secondary | Color | Pink by default. |
| tertiary | Color | Teal by default. |
| neutral | Color | Gray by default. |
| success | Color | Green by default. |
| error | Color | Red by default. |
| warning | Color | Amber by default. |
| info | Color | Sky by default. |
A group
Share a name so the group is one choice.
<label class="radio primary">
<input type="radio" name="note" checked>
<span class="radio-ring"></span>
Keep
</label>
<label class="radio primary">
<input type="radio" name="note">
<span class="radio-ring"></span>
Send
</label>Colors
<label class="radio primary">
<input type="radio" name="primary" checked>
<span class="radio-ring"></span>
Primary
</label>
<label class="radio secondary">
<input type="radio" name="secondary" checked>
<span class="radio-ring"></span>
Secondary
</label>
<label class="radio tertiary">
<input type="radio" name="tertiary" checked>
<span class="radio-ring"></span>
Tertiary
</label>
<label class="radio neutral">
<input type="radio" name="neutral" checked>
<span class="radio-ring"></span>
Neutral
</label>
<label class="radio success">
<input type="radio" name="success" checked>
<span class="radio-ring"></span>
Success
</label>
<label class="radio error">
<input type="radio" name="error" checked>
<span class="radio-ring"></span>
Error
</label>
<label class="radio warning">
<input type="radio" name="warning" checked>
<span class="radio-ring"></span>
Warning
</label>
<label class="radio info">
<input type="radio" name="info" checked>
<span class="radio-ring"></span>
Info
</label>Sizes
<label class="radio radio-lg">
<input type="radio" name="size" checked>
<span class="radio-ring"></span>
Large
</label>