2

Messages

Hadiyat Avatar Hadiyat Virgiawan You sent an attachment. 16 hours ago
John Low Avatar John Low Wait a sec.. 22 hours ago
Yong Tian Avatar Yong Tian How are you? 12 April
Andree Avatar Andree W Kindly check my work 08 April
Lisa Avatar Lisa Tan Please help me check this. 02 April
1

Notifications

Mark all as read
Today
MC Margo Corn has invited you to the project Untitled 2 min EH Elsa Hoffman removed you 1 hr
Yesterday
MP Nadya Pasutri mentioned you in a comment in the project Untitled 2 "Mike, we need to fix this asap" 14:12 KK Konstantin Konstantinovich removed you from Mobile Dolfin 12:03
25 Mar
NP Nadya Pasutri accepted your invitation the project Untitled 2 09:45 KK Siti accepted the invitation to the project Tablature 08:15
Home / User Interface / Forms / Forms Elements

Radio

Get started with the radio element to let users choose a single option from multiple options available.

The radio element is commonly used to allow the user to choose one from multiple options available. This element is also a part of form-control.

Basic Radio

Use this basic example of a radio element in a checked and unchecked state.

Radio Sizes

There must be size options. Because size matters.

Click to show the entire code

Color Schemes

As usual, just use the scheme-{color} class to the check-control element.

Click to show the entire code

Helper Text

Show additional explanation such as hint, link, etc.

Vertical Options

You can align the radios vertically by using a wrapper element and applying the flex flex-col classes.

Horizontal Options

You can align the radios horizontally by using a wrapper element and applying the flex class.

Disabled State

Follow this examples to apply the disabled option.

Multiple Options Disabled

Valid States

Show feedback to users, usually right after performing validation.

Success Options
Error Options
Click to show the entire code