@forter/radio-button
v3.0.24
Published
Radio Button and Group from Forter Components
Downloads
35
Readme
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)
|