Indielayer UI - Vue.js 3 / Nuxt.js 3 UI Library with Tailwind CSS 4. ⚡️  Build and prototype fast web applications.

Indielayer
Indielayer UIIndielayer UI
UI
v2.1.0

Radio

Radios allow the user to select one option from a set. Use classic radios for standard options, or x-radio-button for a button-shaped variant. Place several x-radio-button options inside x-form-group for a joined segmented control.

#
Usage

Basic example with common props.

#
Payment method

Bordered cards with default slot content for extra details.

#
Radio button

Button-shaped options with a shared model value.

#
Radio button group

Inside x-form-group, options render as a single joined control.

Billing plan

#
States

Disabled, loading, and other interactive states.

#
Size

Size options from xs to lg.

#API

Radio

props

Name
Description
Type
Default
Values
Required
size
Control size. One of xs, sm, md, lg, xl.
String
md
xssmmdlgxl
color
Theme or CSS color used for the control accents.
String
primary
disabled
Disables interaction and applies disabled styling.
Boolean
false
loading
Shows a loading indicator and blocks interaction.
Boolean
false
loadingLabel
Accessible label announced while loading.
String
loadingStatus
Loader visual status (for example active or indeterminate).
String
active
modelValue
Bound value (v-model).
String
Number
Boolean
Object
Array
id
Native id attribute for the input element.
String
name
Native name attribute for form submission.
String
readonly
Makes the field read-only without disabling it.
Boolean
false
required
Marks the field as required for validation.
Boolean
false
validateOnInput
Runs validation on each input event when true.
Boolean
true
label
Visible label text for the field.
String
helper
Helper text shown below the field.
String
error
External error message; overrides rule errors when set.
String
hideFooter
Hides the footer area (helper / error).
Boolean
false
rules
Validation rule functions or rule descriptors.
Array
() => []
tooltip
Optional tooltip text next to the label.
String
skipFormRegistry
Skips registering this field with a parent x-form.
Boolean
false
value
Value emitted when this option is selected (v-model / form-group).
String
Number
glow
Soft colored glow behind the control.
Boolean
false

slots

Name
Description
default
Optional content shown below the label.

emits

Name
Description
update:modelValue
Emitted when the bound value changes (v-model).

methods

Name
Description
focus
Focus the underlying control.
blur
Remove focus from the underlying control.
reset
Reset the field value and validation state.
validate
Run validation rules and return whether the field is valid.
setError
Set an external error message on the field.

RadioButton

props

Name
Description
Type
Default
Values
Required
size
Control size. One of xs, sm, md, lg, xl.
String
md
xssmmdlgxl
color
Theme or CSS color used for the control accents.
String
primary
disabled
Disables interaction and applies disabled styling.
Boolean
false
loading
Shows a loading indicator and blocks interaction.
Boolean
false
loadingLabel
Accessible label announced while loading.
String
loadingStatus
Loader visual status (for example active or indeterminate).
String
active
modelValue
Bound value (v-model).
String
Number
Boolean
Object
Array
id
Native id attribute for the input element.
String
name
Native name attribute for form submission.
String
readonly
Makes the field read-only without disabling it.
Boolean
false
required
Marks the field as required for validation.
Boolean
false
validateOnInput
Runs validation on each input event when true.
Boolean
true
label
Visible label text for the field.
String
helper
Helper text shown below the field.
String
error
External error message; overrides rule errors when set.
String
hideFooter
Hides the footer area (helper / error).
Boolean
false
rules
Validation rule functions or rule descriptors.
Array
() => []
tooltip
Optional tooltip text next to the label.
String
skipFormRegistry
Skips registering this field with a parent x-form.
Boolean
false
value
Value emitted when this option is selected (v-model / form-group).
String
Number
outlined
Outline style with a transparent fill.
Boolean
false
rounded
Fully rounded corners (pill shape).
Boolean
false
glow
Soft colored glow behind the control.
Boolean
false
ghost
Minimal style with no background until hover.
Boolean
false
light
Tinted background using the color at low opacity.
Boolean
false
flat
Removes elevation and border emphasis.
Boolean
false
block
Stretches to the full width of the parent.
Boolean
false

slots

Name
Description
default
Button label; falls back to the `label` prop.

emits

Name
Description
update:modelValue
Emitted when the bound value changes (v-model).

methods

Name
Description
focus
Focus the underlying control.
blur
Remove focus from the underlying control.
reset
Reset the field value and validation state.
validate
Run validation rules and return whether the field is valid.
setError
Set an external error message on the field.
input
select