문서 설정 폼

실제 미리보기

사용할 때

구조

1. 01

   설정 그룹 legend

2. 02

   문서 식별 정보

3. 03

   공개와 고정 설정

4. 04

   저장 상태 피드백

상태

• default고정 예시

  편집 가능한 기본 문서 설정입니다.

  문서 설정

  문서 제목

  목록과 브라우저 제목에 표시됩니다.

  문서 종류공지사항공시

  목록 상단에 고정중요한 문서를 먼저 표시합니다.저장 후 바로 공개검토가 끝난 문서에만 사용합니다.
• invalid고정 예시

  문제가 있는 필드만 오류 상태와 구체적인 안내를 표시합니다.

  문서 설정

  문서 제목

  목록과 브라우저 제목에 표시됩니다.

  문서 제목을 입력해 주세요.

  문서 종류공지사항공시

  목록 상단에 고정중요한 문서를 먼저 표시합니다.저장 후 바로 공개검토가 끝난 문서에만 사용합니다.
• disabled고정 예시

  권한이나 문서 상태로 편집할 수 없는 설정을 명확히 비활성화합니다.

  문서 설정

  문서 제목

  목록과 브라우저 제목에 표시됩니다.

  문서 종류공지사항공시

  목록 상단에 고정중요한 문서를 먼저 표시합니다.저장 후 바로 공개검토가 끝난 문서에만 사용합니다.
• saving고정 예시

  저장 중에는 중복 제출을 막고 현재 진행 상태를 알립니다.

  문서 설정

  문서 제목

  목록과 브라우저 제목에 표시됩니다.

  문서 종류공지사항공시

  목록 상단에 고정중요한 문서를 먼저 표시합니다.저장 후 바로 공개검토가 끝난 문서에만 사용합니다.

  문서 설정 저장 중

반응형 동작

1. 01

   작은 화면에서는 가로 필드를 label 다음 입력 순서의 한 열로 바꿉니다.

2. 02

   설명과 오류는 관련 입력 바로 아래에 남깁니다.

접근성

fieldset과 legend로 작업을 이름 붙이고 모든 안내와 오류를 해당 필드에 연결합니다.

사용 예시

import { Checkbox } from "@/components/ui/checkbox"
import {
  Field,
  FieldGroup,
  FieldLabel,
  FieldLegend,
  FieldSet,
} from "@/components/ui/field"
import { Input } from "@/components/ui/input"
import { NativeSelect } from "@/components/ui/native-select"
import { Switch } from "@/components/ui/switch"

<FieldSet>
  <FieldLegend>Document settings</FieldLegend>
  <FieldGroup>
    <Field>
      <FieldLabel>Title</FieldLabel>
      <Input />
    </Field>
    <Field>
      <FieldLabel>Category</FieldLabel>
      <NativeSelect defaultValue="notice">
        <option value="notice">Notice</option>
        <option value="disclosure">Disclosure</option>
      </NativeSelect>
    </Field>
    <Checkbox label="Pin document" />
    <Switch label="Publish immediately" />
  </FieldGroup>
</FieldSet>

관련 문서

소스 경로

• components/design-system/recipes/document-settings-form-demo.tsx소스 보기