CSS: radio

.instui-radio — He pātene iraruke taketake me tōna tūāhua.

Ka whakaritea tōna ake gap i waenganui i te mana whakahaere me tōna tūāhua; mā te here i tētahi kaiwhakatika āwhina wāhi -gap-* ka whakawāteahia taua uara ā-taonga.

Source: radio.css

Wātea mō te katoa

Ko tētahi <input type="radio"> taketake e whakakaha ana i te :checked me te :disabled; he whakakākahu anake te -readonly, nā te kore o ngā iraruke i tētahi āhuatanga readonly taketake.

Ngā Whakamahi

@import "@pantoken/components/components.css";
@import "@pantoken/components/radio.css";

Ngā tauira

<label class="instui-radio"><input type="radio" name="r" checked> Option A</label>

Ngā Kaitī

Kaiwhakatikatika	Whakamārama
.-context-danger	Tae horopaki mōrearea (putanga whakawhiti).
.-context-off	Tae horopaki whakaweto/tautono (putanga whakawhiti).
.-context-success	Tae horopaki angitū (putanga whakawhiti).
.-context-warning	Tae horopaki whakatūpato (putanga whakawhiti).
.-readonly	Āhua pānui-anake.
.-size-large	Nui. He ingoa roa mō -size-lg.
.-size-lg	Nui.
.-size-sm	Ititi.
.-size-small	Ititi. He ingoa roa mō -size-sm.
.-toggle	Alias — maps to .-variant-toggle.
.-variant-toggle	Whakaatuhia hei pātene whakawhiti wāhanga.

Ngā pseudo-kōwae

Pseudo-kōwae	Whakamārama
::before	Te porowhita ā-roto kīkī e whakaatuhia ana ina kua tohu; i runga i te -variant-toggle koinei te porowhita arotahi ka tuhia tonu i waho o te pīhanga.

Ngā āhuatanga

Tūnga	Whakamārama
:checked	—
:disabled	—

Ngā taonga ritenga

Rawa	Momo	Taunoa	Whakamārama
--pantoken-rt-fill	<color>	—	Te tae kī kua tīpakohia mō te whakawhiti; ko ngā kaiwhakatikatika -context-* e tautuhi ana.

Ngā tohu i whakamahia

Token	Momo	Uara
--instui-component-radio-input-background-color	<color>	LightDarklight-dark(#ffffff, #171B21)
--instui-component-radio-input-background-disabled-color	<color>	LightDarklight-dark(#E8EAEC, #334450)
--instui-component-radio-input-background-hover-color	<color>	LightDarklight-dark(#ffffff, #171B21)
--instui-component-radio-input-background-readonly-color	<color>	LightDarklight-dark(#C7CACD, #6A7883)
--instui-component-radio-input-border-color	<color>	LightDarklight-dark(#7E8792, #5F6E7A)
--instui-component-radio-input-border-disabled-color	<color>	LightDarklight-dark(#C7CACD, #4A5B68)
--instui-component-radio-input-border-hover-color	<color>	LightDarklight-dark(#273540, #ffffff)
--instui-component-radio-input-border-readonly-color	<color>	#8D959F
--instui-component-radio-input-border-selected-color	<color>	LightDarklight-dark(#1C222B, #ffffff)
--instui-component-radio-input-border-width	<length>	0.0625rem
--instui-component-radio-input-checked-inset-lg	<length>	0.375rem
--instui-component-radio-input-checked-inset-md	<length>	0.375rem
--instui-component-radio-input-checked-inset-sm	<length>	0.375rem
--instui-component-radio-input-control-size-lg	<length>	1.5rem
--instui-component-radio-input-control-size-md	<length>	1.5rem
--instui-component-radio-input-control-size-sm	<length>	1.5rem
--instui-component-radio-input-control-vertical-margin	<length>	0rem
--instui-component-radio-input-font-family	[ <font-family-name> | <generic-font-family> ]#	Atkinson Hyperlegible Next, "Helvetica Neue", Helvetica, Arial, sans-serif
--instui-component-radio-input-font-size-lg	<length>	1.25rem
--instui-component-radio-input-font-size-md	<length>	1rem
--instui-component-radio-input-font-size-sm	<length>	0.875rem
--instui-component-radio-input-font-weight	<integer>	400
--instui-component-radio-input-gap	<length>	0.5rem
--instui-component-radio-input-label-base-color	<color>	LightDarklight-dark(#273540, #ffffff)
--instui-component-radio-input-label-disabled-color	<color>	LightDarklight-dark(#8D959F, #576773)
--instui-component-radio-input-label-hover-color	<color>	LightDarklight-dark(#273540, #ffffff)
--instui-component-radio-input-label-readonly-color	<color>	LightDarklight-dark(#273540, #F2F4F5)
--instui-component-radio-input-line-height-lg	<length>	1.5rem
--instui-component-radio-input-line-height-md	<length>	1.5rem
--instui-component-radio-input-line-height-sm	<length>	1.25rem
--instui-component-radio-input-toggle-background-danger	<color>	#CF4A00
--instui-component-radio-input-toggle-background-off	<color>	#03893D
--instui-component-radio-input-toggle-background-success	<color>	#03893D
--instui-component-radio-input-toggle-background-warning	<color>	#CF4A00
--instui-component-radio-input-toggle-border-radius	<length>	0.25rem
--instui-component-radio-input-toggle-handle-text	<color>	#ffffff
--instui-component-radio-input-toggle-large-font-size	<length>	1rem
--instui-component-radio-input-toggle-large-height	<length>	3rem
--instui-component-radio-input-toggle-medium-font-size	<length>	0.875rem
--instui-component-radio-input-toggle-medium-height	<length>	2.5rem
--instui-component-radio-input-toggle-small-font-size	<length>	0.75rem
--instui-component-radio-input-toggle-small-height	<length>	2rem
--instui-elevation-depth1	none | <shadow>#	—
--instui-focus-outline-color	auto | <color>	—
--instui-focus-outline-style	auto | <outline-line-style>	—
--instui-focus-outline-width	<line-width>	—

Hono

• checkbox — Te hoa maha-tīpako ki tētahi iraruke kotahi-tīpako.
• radio-input-group — E kohikohi ana i ngā iraruke ki tētahi huinga papa kotahi-tīpako.