Radio

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

Sizes

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

API

Radio API <i-radio>
Property Description Type Accepted Default
custom Sets the styling of the radio form component to custom or native. Boolean true, false true
disabled Sets the state of the radio form component as disabled. Boolean true, false false
indeterminate Sets the state of the radio form component as indeterminate. Boolean true, false false
readonly Sets the state of the radio form component as readonly. Boolean true, false false
schema Provides a schema binding to the radio form component. See the Form Validation documentation. Object
size Sets the size of the radio form component. String sm, md, lg md
value Sets the value of the radio form component. String
Radio Group API <i-radio-group>
Property Description Type Accepted Default
disabled Sets the state of the radio form group component as disabled. Boolean true, false false
readonly Sets the state of the radio form group component as readonly. Boolean true, false false
size Sets the size of the radio form group component. String sm, md, lg md
value Sets the value of the radio form group component. To be provided using the v-model directive. String