CSS: form-field-group

.instui-form-field-group — Một nhóm <fieldset> có legend, bố cục cột hoặc inline, và khoảng cách có thể cấu hình.

Đặt gap riêng giữa các trường, có thể điều chỉnh bằng các modifier -col-spacing-*/-row-spacing-* bên dưới — ưu tiên dùng chúng hơn là xâu chuỗi modifier tiện ích khoảng cách -gap-* chung, vì modifier đó sẽ ghi đè hoàn toàn giá trị tích hợp sẵn.

Source: form-field-group.css

Khả năng truy cập

Hiển thị một <fieldset> gốc với <legend>, để văn bản legend đặt tên cho toàn bộ nhóm cho công nghệ trợ giúp.

Sử dụng

@import "@pantoken/components/components.css";
@import "@pantoken/components/form-field-group.css";

Các ví dụ

<fieldset class="instui-form-field-group -layout-columns -col-spacing-medium">
  <legend>Shipping address</legend>
  <label class="instui-form-field">
    <span class="label">First name</span>
    <span class="controls"><input class="instui-text-input"></span>
  </label>
  <label class="instui-form-field">
    <span class="label">Last name</span>
    <span class="controls"><input class="instui-text-input"></span>
  </label>
  <label class="instui-form-field">
    <span class="label">City</span>
    <span class="controls"><input class="instui-text-input"></span>
  </label>
  <label class="instui-form-field">
    <span class="label">State</span>
    <span class="controls">
      <select class="instui-simple-select">
        <option>CA</option>
        <option>NY</option>
        <option>TX</option>
      </select>
    </span>
  </label>
  <div class="instui-form-field-messages">
    <span class="instui-form-field-message -type-hint">All fields are used for delivery only.</span>
  </div>
</fieldset>

Cấu trúc

.instui-form-field-group.-layout-columns.-col-spacing-medium
  legend
  form-field (component)
  form-field-messages (component)

flowchart TD n0[".instui-form-field-group.-layout-columns.-col-spacing-medium"]:::cssdoc-root n1("legend"):::cssdoc-part n2(["form-field"]):::cssdoc-component n3(["form-field-messages"]):::cssdoc-component n0 --> n1 n0 --> n2 n0 --> n3 click n2 "/api/css/form-field.md" click n3 "/api/css/form-field-messages.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;

Bộ sửa

Bộ sửa	Mô tả
.-col-spacing-large	Khoảng cách cột lớn.
.-col-spacing-medium	Khoảng cách cột vừa.
.-col-spacing-none	Không có khoảng cách cột.
.-col-spacing-small	Khoảng cách cột nhỏ.
.-layout-aligned	Căn các trường con theo một lưới chung.
.-layout-columns	Bố cục các trường con theo cột.
.-layout-inline	Bố cục các trường con theo hàng, inline.
.-required	Đánh dấu nhóm là bắt buộc.
.-row-spacing-large	Khoảng cách hàng lớn.
.-row-spacing-medium	Khoảng cách hàng vừa.
.-row-spacing-none	Không có khoảng cách hàng.
.-row-spacing-small	Khoảng cách hàng nhỏ.
.-v-align-bottom	Căn các trường về phía đáy.
.-v-align-middle	Căn các trường về giữa.
.-v-align-top	Căn các trường về phía trên.

Phần tử giả

Phần tử giả	Mô tả
::after	Hiển thị dấu hoa thị trang trí cho trường bắt buộc sau văn bản legend khi nhóm được đánh dấu là bắt buộc.

Điều kiện

Kiểu	Truy vấn	Mô tả
supports	(grid-template-columns: subgrid)	—

Token tiêu thụ

Token	Kiểu	Giá trị
--instui-component-form-field-layout-asterisk-color	<color>	LightDarklight-dark(#CF1F24, #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-lg	<length>	1rem
--instui-spacing-space-md	<length>	0.75rem
--instui-spacing-space-sm	<length>	0.5rem

Hỗ trợ trình duyệt

• Chế độ -layout-aligned sử dụng CSS subgrid bên trong một rào chắn @supports; nếu subgrid không được hỗ trợ, các trường sẽ quay về bố cục xếp chồng của chính chúng.

Các thành phần phụ

• form-field
• form-field-messages

Liên quan

• form-field — Trường đơn lẻ mà nhóm này lặp lại.
• radio-input-group — Gom các input radio dưới một legend.