Home
Introduction
Color Library

Components

Alert
Avatar
Badge
Button
Details
Icon
Tabs
Time-ago
Tooltip
Table

Form components

Text Input
Textarea
Checkbox
Radio
Select
Form components

Radio

A form control for making a single selection from a short list of options.

Usage 

This is a caption
This is a caption
Are you feeling lucky?
cancel You don't have enough credits 
<div class="row">
  <ui:Radio label="The label" name="demo" value="1" />
  <ui:Radio label="Pre-checked" caption="This is a caption" name="demo" value="2" checked />
</div>
<div class="row">
  <ui:Radio label="Disabled" caption="This is a caption" name="demo" value="3" disabled />
  <ui:Radio
    label="First class"
    caption="Are you feeling lucky?"
    invalid="You don't have enough credits"
    name="demo"
    value="4"
  />
</div>

Size 

This is a caption
This is a caption 
<div class="row">
  <ui:Radio label="Default checkbox" caption="This is a caption" name="size" />
  <ui:Button>Reference</ui:Button>
</div>
<div class="row">
  <ui:Radio label="Large checkbox" caption="This is a caption" size="large" name="size" />
  <ui:Button size="large">Reference</ui:Button>
</div>

With icon 

favorite
Checkbox with icon
favorite
Large checkbox with icon
star
Checkbox with icon
star
Large checkbox with icon 
<div class="row">
  <ui:Radio
    label="Sponsors"
    caption="Checkbox with icon"
    icon="favorite"
    name="icon"
  />
  <ui:Radio
    label="Sponsors"
    caption="Large checkbox with icon"
    icon="favorite"
    size="large"
    name="icon"
  />
</div>
<div class="row">
  <ui:Radio
    label="Stars"
    caption="Checkbox with icon"
    icon="star"
    name="icon"
  />
  <ui:Radio
    label="Stars"
    caption="Large checkbox with icon"
    icon="star"
    size="large"
    name="icon"
  />
</div>

Component arguments 

Radio 

ArgumentTypeDescription
label str Required. Label for the radio button.
id str Optional. ID of the radio button. Automatically generated if not set.
caption str Optional. Caption for the radio button.
icon str Optional. Name of the Material Symbol icon to show before the radio button.
size str Optional. Size of the radio button. Can be "medium" or "large".
block bool Optional. If true, the radio button will take the full width of its parent.
required bool Optional. If true, the radio button will be marked as required.
disabled bool Optional. If true, the radio button will be disabled.
loading bool Optional. If true, the radio button will show a loading spinner.
valid str Optional. Positive validation message to show below the radio button.
invalid str Optional. Negative validation message to show below the radio button.

Components 

Component
File
Source
Radio
radio.jinja
radio.css
form-field.css