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 |