@forter/radio NPM

fc-radio

An radio control which is mostly used in forms.

Usage

<script>
  import '@forter/radio';
</script>

<fc-radio value="radio"> Radio </fc-radio>

Examples

<!-- textContent -->
<fc-radio value="bar">
   Bar
</fc-radio>

Properties

Property	Attribute	Type	Default	Description
`animation`	`animation`	`"default" \\| "playful"`		Animation type
`checked`	`checked`	`boolean`	false	If the element is checked
`disabled`	`disabled`	`boolean`	false	If the element is disabled
`intent`	`intent`	`"primary" \\| "secondary" \\| "success" \\| "danger" \\| "warn"`		The radio's intent. See Intents in README.
`name`	`name`	`string`	"radio"	The name of all the radio buttons in the same radio group
`value`	`value`	`string`		The unique ID of the current radio button

Events

Event	Description
`change`	when changing checked value. method: `change`, example: `{ "target": { "checked": true } }`

Slots

Name	Description
	textContent for the radio label

CSS Custom Properties

Property
`--fc-radio-checked-color`
`--fc-radio-font`
`--fc-radio-hover-color`
`--fc-radio-line-height`
`--fc-radio-padding`

fc-radio-group

An radio group control which is mostly used in forms.

Usage

<script>
  import '@forter/radio';
</script>

<fc-radio-group name="foods">
   <fc-radio value="pizza">Pizza</fc-radio>
   <fc-radio checked value="hamburger">Hamburger</fc-radio>
   <fc-radio disabled value="kalles kaviar">Kalles Kaviar</fc-radio>
   <fc-radio value="salad">Salad</fc-radio>
   <fc-radio value="milkshake">Milkshake</fc-radio>
   <fc-radio disabled value="ice cream">Ice Cream</fc-radio>
   <fc-radio value="brownies">Brownies</fc-radio>
</fc-radio-group>

Examples

<!-- playful -->
<fc-radio-group name="foods">
   <fc-radio value="pizza" animation="playful">Pizza</fc-radio>
   <fc-radio checked value="hamburger" animation="playful">Hamburger</fc-radio>
   <fc-radio disabled value="kalles kaviar" animation="playful">Kalles Kaviar</fc-radio>
   <fc-radio value="salad" animation="playful">Salad</fc-radio>
   <fc-radio value="milkshake" animation="playful">Milkshake</fc-radio>
   <fc-radio disabled value="ice cream" animation="playful">Ice Cream</fc-radio>
   <fc-radio value="brownies" animation="playful">Brownies</fc-radio>
</fc-radio-group>

Properties

Property	Attribute	Type	Default	Description
`checked`	`checked`	`string`		If the element is checked
`disabled`	`disabled`	`boolean`	false	If the element is disabled
`name`	`name`	`string`	"radio"	The name of all the radio buttons in the same radio group