fc-radio-button

⚠️⚠️ This component is deprecated and might be unstable. please use fc-radio. ⚠️⚠️

Properties

| Property | Attribute | Type | Default | Description | |------------|------------|-----------|---------|---------------------------------| | checked | checked | boolean | false | If the element is disabled | | disabled | disabled | boolean | false | Whether the element is disabled | | inputId | | string | | | | label | label | string | "" | The element's label | | labelId | | string | | | | name | name | string | "" | The input's name | | value | value | string | "" | The input's value |

Events

| Event | |-----------------| | item-selected |

Slots

| Name | Description | |---------|--------------------------------------------------| | input | internally used to render light children. Do not use. | | label | internally used to render light children. Do not use. |

CSS Custom Properties

| Property | Description | |------------------------------------|--------------------------------| | --fc-radio-border-color | default: var(--gray-8) | | --fc-radio-checked-color | default: var(--ftr-cyan) | | --fc-radio-disabled-border-color | default: rgba(0, 0, 0, 0.25) | | --fc-radio-disabled-text-color | default: var(--gray-3) | | --fc-radio-hover-color | default: var(--gray-0) | | --fc-radio-text-color | default: black |

fc-radio-button-group

##Usage

Default

<fc-radio-group>
     <fc-radio-button label="Pizza" value="pizza"></fc-radio-button>
     <fc-radio-button label="Hamburger" value="hamburger"></fc-radio-button>
</fc-radio-group>

Preselected

<fc-radio-group>
     <fc-radio-button checked label="Pizza" value="pizza"></fc-radio-button>
     <fc-radio-button label="Hamburger" value="hamburger"></fc-radio-button>
</fc-radio-group>

Disabled

<fc-radio-group>
     <fc-radio-button disabled label="Pizza" value="pizza"></fc-radio-button>
     <fc-radio-button label="Hamburger" value="hamburger"></fc-radio-button>
</fc-radio-group>

Disable All

<fc-radio-group disabled>
     <fc-radio-button label="Pizza" value="pizza"></fc-radio-button>
     <fc-radio-button label="Hamburger" value="hamburger"></fc-radio-button>
</fc-radio-group>

Properties

| Property | Attribute | Type | Default | Description | |------------------------|-----------|----------|-----------|-----------------------------| | attributeForSelected | | string | "checked" | | | legend | legend | string | "" | The legend for the fieldset |

Slots

| Name | Description | |------|----------------------------------------------| | | internally used for light input. Do not use. |

CSS Custom Properties

| Property | Description | |---------------------------------|---------------------------| | --fc-radio-group-legend-color | default: var(--ftr-red) |