Radio inputs allow the user to select one option from a set of options.

Typically, there should not be too many options. Make sure you use a select input if you think the user doesn't need to see all the available options side-by-side.

You will need to use the i-radio component together with a i-radio-group.

Basic Usage

Radio Group


You're able to use the size property to control the size of your inputs, using one of the available sizes: sm, md, and lg. The default size is set to md.

Radio Sizes

Applying the size size property to a i-radio-group will set the chosen size to all of its child inputs.

Radio Group Sizes

Custom vs. Native

Inkline uses custom radio designs by setting the custom property to true by default.

Custon Radio Input

By setting the custom property to false, the radios use the browser's default design.

Native Radio Input

Radio Buttons

You can display your radio inputs as toggleable buttons using the provided <i-radio-button> and <i-radio-button-group> components.

Radio Button Group

Component API

Here you can find a list of the various customization options you can use for the radio components as props, as well as available slots and events.

Radio API
Radio Group API

Sass Variables

Here you can find a list of the Sass variables you can use for the checkbox and radio components. If you're looking to find common variables that these rely on, you should take a look at the Sass Variables page.