HTML-First UI
Components
Examples
Accordion
Alert
Autocomplete
Avatar
Badge
Blockquote
Box
Breadcrumb
Button
Card
Checkbox
Code Block
Code
Container
Details
Dialog
Dot
Form
Grid
Headings
Horizontal Rule
Input
Keyboard
Link
Lists
Loader
Menu
Radio
Range
Responsive Header
Responsive Sidebar
Select
Switch
Table
Tabs
Tag
Text
Textarea
Theme Menu
Theme Switch
Vertical Rule
Radio
A form input component for single selection from multiple options
<hf-input-group> <legend>Speed</legend> <input type="radio" name="speed" value="slow" id="speed_slow" checked> <label for="speed_slow">Slow</label> <input type="radio" name="speed" value="med" id="speed_med"> <label for="speed_med">Medium</label> <input type="radio" name="speed" value="fast" id="speed_fast"> <label for="speed_fast">Fast</label> </hf-input-group>
Speed
Slow
Medium
Fast
Notes
The radio component allows users to select one option from a group.
Wrap radio buttons in an
hf-input-group
Use
legend
for group labels
Each radio button should have an associated label
Group related options with the same
name
attribute