@forter/radio-button NPM

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>