CSS: radio-input-group ​

.instui-radio-input-group — Sebuah <fieldset> radio pemilih tunggal, biasa atau sebagai toggle tersegmentasi yang terhubung.

Mengatur gap-nya sendiri di antara radio; menggabungkan modifier utilitas spasi -gap-* akan menimpa nilai bawaan tersebut.

Source: radio-input-group.css

Aksesibilitas ​

Merender <fieldset> native dengan <legend> yang memberi nama grup; radio anak berbagi satu name, jadi hanya satu yang dapat dipilih pada satu waktu.

Penggunaan ​

css
@import "@pantoken/components/components.css";
@import "@pantoken/components/radio-input-group.css";

Contoh ​

html
<fieldset class="instui-radio-input-group">
  <legend>Ukuran T-shirt</legend>
  <label class="instui-radio"><input type="radio" name="size" checked> Kecil</label>
  <label class="instui-radio"><input type="radio" name="size"> Sedang</label>
  <label class="instui-radio"><input type="radio" name="size"> Besar</label>
</fieldset>

Toggle variant ​

html
<fieldset class="instui-radio-input-group -variant-toggle">
  <legend>Ukuran T-shirt</legend>
  <label class="instui-radio -variant-toggle"><input type="radio" name="size" checked> Kecil</label>
  <label class="instui-radio -variant-toggle"><input type="radio" name="size"> Sedang</label>
  <label class="instui-radio -variant-toggle"><input type="radio" name="size"> Besar</label>
</fieldset>

Struktur ​

text
.instui-radio-input-group.-variant-toggle
  legend
  radio (component)
    input
flowchart TD n0[".instui-radio-input-group.-variant-toggle"]:::cssdoc-root n1("legend"):::cssdoc-part n2(["radio"]):::cssdoc-component n3("input"):::cssdoc-part n0 --> n1 n2 --> n3 n0 --> n2 click n2 "/api/css/radio.md" classDef cssdoc-root stroke-width:1px; classDef cssdoc-part stroke-width:1px; classDef cssdoc-slot stroke-width:1px; classDef cssdoc-component stroke-width:1px;

Modifikator ​

ModifikatorDeskripsi
.-layout-columnsSusun radio dalam kolom.
.-layout-inlineSusun radio secara sejajar (inline).
.-requiredMenandai grup sebagai wajib.
.-variant-toggleSusun toggle anak sebagai kontrol tersegmentasi (hanya segmen yang dipilih yang terisi).

Pseudo-elemen ​

Pseudo-elemenDeskripsi
::afterMerender tanda bintang dekoratif untuk bidang wajib setelah teks legend ketika grup diberi tanda wajib.

Token yang digunakan ​

TokenTipeNilai
--instui-component-form-field-layout-asterisk-color<color>LightDarklight-dark(#C51F22, #FA917F)
--instui-component-form-field-layout-font-family[ <font-family-name> | <generic-font-family> ]#Atkinson Hyperlegible Next, "Helvetica Neue", Helvetica, Arial, sans-serif
--instui-component-form-field-layout-font-size<length>1rem
--instui-component-form-field-layout-font-weight<integer>400
--instui-component-form-field-layout-gap-inputs<length>0.75rem
--instui-component-form-field-layout-gap-primitives<length>0.5rem
--instui-component-form-field-layout-line-height<length>1.125rem
--instui-component-form-field-layout-text-color<color>LightDarklight-dark(#273540, #ffffff)
--instui-spacing-space-md<length>0.75rem

Subkomponen ​

Terkait ​

  • radio — Kontrol individu yang dikumpulkan oleh grup ini.
  • form-field-group — Pembungkus umum untuk mengelompokkan dan menyusun bidang.