CSS: form-field-group ​

.instui-form-field-group — 범례가 있고 열 또는 인라인 레이아웃과 구성 가능한 간격을 가진 <fieldset> 그룹입니다.

필드 사이에 자체 gap를 설정하며, 아래의 -col-spacing-*/-row-spacing-* 수정자로 조정할 수 있습니다 — 내장 값을 완전히 덮어쓰는 일반적인 -gap-* 간격 유틸리티 수정자를 연쇄적으로 사용하는 것보다 이 수정자를 선호하세요.

Source: form-field-group.css

접근성 ​

범례 텍스트가 보조 기술에서 그룹 전체를 명명하도록 <legend>가 있는 네이티브 <fieldset>를 렌더링합니다.

사용법 ​

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

예제들 ​

html
<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>

구조 ​

text
.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;

수정자 ​

수정자설명
.-col-spacing-large큰 열 간격.
.-col-spacing-medium중간 열 간격.
.-col-spacing-none열 간격 없음.
.-col-spacing-small작은 열 간격.
.-layout-aligned자식 필드를 공통 그리드에 정렬합니다.
.-layout-columns자식 필드를 열 형태로 배치합니다.
.-layout-inline자식 필드를 한 줄로, 인라인으로 배치합니다.
.-required그룹을 필수로 표시합니다.
.-row-spacing-large큰 행 간격.
.-row-spacing-medium중간 행 간격.
.-row-spacing-none행 간격 없음.
.-row-spacing-small작은 행 간격.
.-v-align-bottom필드들을 하단 정렬합니다.
.-v-align-middle필드들을 가운데 정렬합니다.
.-v-align-top필드들을 상단 정렬합니다.

의사 요소 ​

의사 요소설명
::after그룹이 필수일 때 범례 텍스트 뒤에 장식용 필수 필드 별표를 렌더링합니다.

조건 ​

타입쿼리설명
supports(grid-template-columns: subgrid)—

사용된 토큰 ​

Token타입값
--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

브라우저 지원 ​

  • -layout-aligned 모드는 @supports 보호 아래에서 CSS 서브그리드를 사용합니다; 서브그리드가 지원되지 않는 환경에서는 필드가 자체적인 스택형 레이아웃으로 폴백됩니다.

하위 컴포넌트 ​

관련 항목 ​

  • form-field — 이 그룹이 반복하는 단일 필드입니다.
  • radio-input-group — 범례 아래에 라디오 입력을 그룹화합니다.