@forter/radio

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

Events

Event	Description
change	event whenever any change is happening with the radio buttons
select	event whenever a specific radio button selected