CSS: radio

.instui-radio — Ένα εγγενές κουμπί επιλογής (radio) και η ετικέτα του.

Ορίζει το δικό του gap μεταξύ του ελέγχου και της ετικέτας· η αλυσίδωση ενός μετατροπέα διάκενου -gap-* παρακάμπτει την ενσωματωμένη αυτή τιμή.

Source: radio.css

Προσβασιμότητα

Ένα εγγενές <input type="radio"> κινεί τα :checked και :disabled; το -readonly αφορά μόνο το στυλ, αφού τα radios δεν έχουν εγγενές χαρακτηριστικό readonly.

Χρήση

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

Παραδείγματα

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

Τροποποιητές

Τροποποιητής	Περιγραφή
.-context-danger	Χρώμα πλαισίου επικίνδυνου περιεχομένου (παραλλαγή toggle).
.-context-off	Χρώμα πλαισίου απενεργοποιημένου/ουδέτερου περιεχομένου (παραλλαγή toggle).
.-context-success	Χρώμα πλαισίου επιτυχίας περιεχομένου (παραλλαγή toggle).
.-context-warning	Χρώμα πλαισίου προειδοποίησης περιεχομένου (παραλλαγή toggle).
.-readonly	Κατάσταση μόνο για ανάγνωση.
.-size-large	Μεγάλο. Μακροσκελής συνώνυμο του -size-lg.
.-size-lg	Μεγάλο.
.-size-sm	Μικρό.
.-size-small	Μικρό. Μακροσκελής συνώνυμο του -size-sm.
.-toggle	Alias — maps to .-variant-toggle.
.-variant-toggle	Απόδοση ως διακριτό (segmented) κουμπί toggle.

Ψευδοστοιχεία

Ψευδοστοιχείο	Περιγραφή
::before	Η συμπληρωμένη εσωτερική κουκκίδα που εμφανίζεται όταν είναι επιλεγμένο· σε -variant-toggle είναι το δακτύλιο εστίασης σχεδιασμένος ακριβώς έξω από το pill.

Καταστάσεις

Κατάσταση	Περιγραφή
:checked	—
:disabled	—

Προσαρμοσμένες ιδιότητες

Ιδιότητα	Τύπος	Προεπιλογή	Περιγραφή
--pantoken-rt-fill	<color>	—	Το χρώμα συμπλήρωσης της επιλεγμένης κατάστασης του toggle· ορίζεται από τους τροποποιητές -context-*.

Καταναλωμένα tokens

Token	Τύπος	Τιμή
--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>	—

Σχετιζόμενα

• checkbox — Το αντίστοιχο πολλαπλής επιλογής ενός single-select radio.
• radio-input-group — Συγκεντρώνει radios σε ένα single-select fieldset.