Radio

Examples

Apples

Oranges

Blueberries

<nxt-radio-group id="defaultRadioGroup">
  <nxt-radio value="apples">Apples</nxt-radio>
  <nxt-radio value="oranges">Oranges</nxt-radio>
  <nxt-radio value="blueberries">Blueberries</nxt-radio>
</nxt-radio-group>

<script>
  const radioGroup = document.getElementById('defaultRadioGroup');
  radioGroup.addEventListener('input', (event) => {
    console.log(`Selected: ${event.target.value}`);
  });
</script>

Apples

Oranges

Blueberries

<nxt-radio-group value="oranges">
  <nxt-radio value="apples">Apples</nxt-radio>
  <nxt-radio value="oranges">Oranges</nxt-radio>
  <nxt-radio value="blueberries">Blueberries</nxt-radio>
</nxt-radio-group>

Apples

Oranges

Blueberries

<nxt-radio-group>
  <nxt-radio size="large" value="apples">Apples</nxt-radio>
  <nxt-radio size="large" value="oranges">Oranges</nxt-radio>
  <nxt-radio size="large" value="blueberries">Blueberries</nxt-radio>
</nxt-radio-group>

Apples

Oranges

Blueberries

<nxt-radio-group>
  <nxt-radio disabled value="apples">Apples</nxt-radio>
  <nxt-radio disabled value="oranges">Oranges</nxt-radio>
  <nxt-radio disabled value="blueberries">Blueberries</nxt-radio>
</nxt-radio-group>

Apples

Oranges

Blueberries

<nxt-radio-group>
  <nxt-radio invalid value="apples">Apples</nxt-radio>
  <nxt-radio invalid value="oranges">Oranges</nxt-radio>
  <nxt-radio invalid value="blueberries">Blueberries</nxt-radio>
</nxt-radio-group>

import '@nxt/ndbx-components/radio';

NxtRadio

This is a radio button.

Tag: nxt-radio

Properties

Property	Attribute	Type	Default	Description
`checked`	`checked`	`boolean`	`false`	Whether the radio button is checked.
`disabled`	`disabled`	`boolean`	`false`	Whether the radio button is disabled.
`invalid`	`invalid`	`boolean`	`false`	Whether the radio button is invalid.
`size`	`size`	`NxtRadioSize`	`'small'`	The size of the label.
`value`	`value`	`string`	`''`	The value bound to the radio button.

Type Aliases

NxtRadioSize

'small' | 'large'