@forter/radio-button

fc-radio-button

Properties

Property	Attribute	Type	Description
checked	checked	boolean	If the element is disabled
disabled	disabled	boolean	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

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

Slots

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

fc-radio-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

CSS Custom Properties

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

Slots

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