radio

➤ wl-radio

Select one option from a set.

➤ Properties

Property	Attribute	Type	Default	Description
ariaChecked	aria-checked	string		Aria checked attribute.
checked	checked	boolean	false	Checks the switch.
disabled	disabled	boolean	false	Disables the element.
name	name	string | undefined		Name of the native form element.
readonly	readonly	boolean	false	Makes the element readonly (disabled but tabbable)
required	required	boolean	false	Makes the element required in a form context.
role	role	AriaRole	"radio"	Role of the radio behavior.
value	value	string	""	Value of the form element.

➤ Events

Event	Description
change	Dispatched when the checked property changes due to a user interaction.

➤ CSS Custom Properties

Property	Description
--radio-bg	Default background
--radio-bg-checked	Background when checked
--radio-bg-disabled	Background when disabled and checked
--radio-bg-disabled-checked	Background when disabled and checked
--radio-border-config	Border configuration (width and style)
--radio-border-radius	Border radius
--radio-color	Default color
--radio-color-checked	Color when checked
--radio-color-disabled	Color when disabled
--radio-color-disabled-checked	Color when disabled and checked
--radio-dot-border-radius	Border radius of the dot
--radio-dot-size	Size of the dot
--radio-dot-transition	Transition of the dot
--radio-ripple-transform	Transform of the ripple
--radio-size	Width and height
--radio-transition	Transition

➤ Usage

Go here to try the demo.

➤ Contributors

Andreas Mehlsen	You?

➤ License

Licensed under MIT.