Displays a radio input styled like a terminal UI radio
| 1 |
|
| 2 |
<label> |
| 3 |
<input type="radio" name="choice" /> |
| 4 |
Option |
| 5 |
</label> |
| 6 |
|
Import
@import "@webtui/css/components/radio.css";
Usage
<label>
<input type="radio" name="choice" />
Option
</label>
Examples
Checked/Unchecked
| 1 |
|
| 2 |
<label> |
| 3 |
<input type="radio" name="r" /> |
| 4 |
Unchecked |
| 5 |
</label> |
| 6 |
<label> |
| 7 |
<input type="radio" name="r" checked /> |
| 8 |
Checked |
| 9 |
</label> |
| 10 |
|
Disabled
| 1 |
|
| 2 |
<label> |
| 3 |
<input type="radio" name="r2" disabled /> |
| 4 |
Disabled |
| 5 |
</label> |
| 6 |
<label> |
| 7 |
<input type="radio" name="r2" checked disabled /> |
| 8 |
Checked Disabled |
| 9 |
</label> |
| 10 |
|
Reference
Extending
To extend the Radio stylesheet, define a CSS rule on the components layer:
@layer components {
input[type="radio"] {
/* ... */
}
}
Scope
- All native
<input type="radio"> elements
input[type="radio"] {
/* ... */
}