@forter/radio
v3.3.4
Published
Radio Button and Group from Forter Components
Readme
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 |
