generic-radio

WAI ARIA Practices

A radio group is a set of checkable buttons, known as radio buttons, where no more than one of the buttons can be checked at a time.

API:

name	detail
selected-changed	number

name	type
selected	number
vertical	boolean
disabled	boolean
label	string

name	type
selected	number
value	string

name	description
default	Provide nodes as lightdom

name	description
group

name	description
--generic-radio-border	Controls the color of the border when selected
--generic-radio-fill	Controls the fill color when selected

Usage:

The radio component requires some light dom children.

Default:

Show code

<generic-radio label="radio group">
  <div>foo</div>
  <div>bar</div>
  <div>baz</div>
</generic-radio>

foo

bar

baz

Selected:

Show code

<generic-radio selected="1" label="radio group">
  <div>foo</div>
  <div>bar</div>
  <div>baz</div>
</generic-radio>

foo

bar

baz

Vertical:

Show code

<generic-radio vertical label="radio group">
  <div>foo</div>
  <div>bar</div>
  <div>baz</div>
</generic-radio>

foo

bar

baz

Disabled:

Show code

<generic-radio disabled label="radio group">
  <div>foo</div>
  <div>bar</div>
  <div>baz</div>
</generic-radio>

foo

bar

baz

Color:

Show code

<style>
generic-radio.styled {
  --generic-radio-border: #570350;
  --generic-radio-fill: #cb0abb;
}
generic-radio.styled div:focus {
  border-radius: 4px;
  box-shadow: #cb0abb 0px 0px 12px, #cb0abb 0px 0px 0px 1px!important;
}
</style>
<generic-radio label="radio group">
  <div>foo</div>
  <div>bar</div>
  <div>baz</div>
</generic-radio>

foo

bar

baz