Radio Button

Tune in and choose you favorite station with our radio buttons.

Example

Props

🕹️ standard props
name
string
Name attribute for the radio button.
value
string
Value associated with the radio button.
id
string
ID attribute for the radio button.
undefined
checked
boolean
Whether the radio button is checked.
$bindable(false)
label
string
Label text for the radio button.
undefined
disabled
boolean
Disables the radio button.
false
🎨 style props
--radio-button-active-color
color
Color of the active radio button.
rgb(var(--global-color-primary-500))
--radio-button-active-inner-color
color
Inner color of the active radio button.
rgb(var(--global-color-grey-50))
--radio-button-focus-shadow
shadow
Shadow when the radio button is focused.
2px rgb(var(--global-color-primary-500), .3)
--radio-button-border-color
color
Border color of the radio button.
rgb(var(--global-color-contrast-300), .2)
--radio-button-border-hover-color
color
Border color when the radio button is hovered.
rgb(var(--global-color-primary-500))
--radio-button-background-color
color
Background color of the radio button.
rgb(var(--global-color-background-200))
--radio-button-disabled-color
color
Color of the disabled radio button.
rgb(var(--global-color-background-200), .5)
--radio-button-disabled-active-color
color
Color of the active state when disabled.
rgb(var(--global-color-primary-400))

Slots

No data available

Events

onchange
Triggered when the radio button state changes.
oninput
Triggered when the radio button receives input.
onfocus
Triggered when the radio button gains focus.
onblur
Triggered when the radio button loses focus.
onkeydown
Triggered when a key is pressed down while focused on the radio button.
onkeypress
Triggered when a key is pressed and released while focused on the radio button.
onkeyup
Triggered when a key is released while focused on the radio button.