Input

짧은 텍스트나 수치를 명확한 맥락 안에서 입력받습니다.

목적

Input은 이름, 검색어, 수치처럼 한 줄로 편집하는 값을 받는다. 사용자가 무엇을 입력하고 그 값이 다음 작업에 어떻게 연결되는지 label, 도움말, 오류와 함께 분명히 보여준다.

선택 기준

한 줄 텍스트, 숫자, 날짜 등 native input type으로 표현 가능한 값에 사용한다.
여러 줄 서술에는 textarea component가 필요하다.
제한된 후보 중 하나를 고르는 값은 Select를 사용한다.
Input 단독보다 FormField composition으로 label, description, error 관계를 구성하는 것을 우선한다.

실제 패키지 렌더링

기본 사용 예시

예시 데이터

커리큘럼 이름

목록과 학습자 화면에 함께 표시돼요.

구조

Input은 native input 하나를 렌더한다. Form에서는 Label을 연결하고 필요한 경우 입력 전 도움말과 입력 후 오류를 가까이에 둔다. 단위나 앞뒤 action을 붙일 때도 실제 input의 focus 경계와 접근 가능한 이름이 흐려지지 않게 한다.

변형과 크기

별도 variant나 size prop은 없다. 기본 높이는 40px, 전체 너비, 12px 좌우 padding이다. mobile에서는 16px 글자를 사용해 확대 문제를 줄이고 md 이상에서는 14px을 사용한다. file input의 button text에도 동일한 visual language가 적용된다.

상태와 동작

native input props를 그대로 지원하므로 type, value, defaultValue, onChange, required, readOnly, disabled 등을 사용할 수 있다. focus-visible ring과 disabled 표현이 포함된다. 전용 error나 loading prop은 없다. 오류 상태는 aria-invalid, 설명 관계, 오류 문구를 함께 구성한다.

콘텐츠

Label이 입력 목적을 설명해야 하며 placeholder는 형식 예시나 보조 힌트로만 사용한다. placeholder 안에 필수 조건을 숨기지 않는다. 입력 제약은 사용자가 입력하기 전에 알려주고, 오류는 무엇을 고쳐야 하는지 구체적으로 쓴다.

접근성

모든 Input은 Label htmlFor와 id 또는 동등한 programmatic label을 가진다. 도움말과 오류는 aria-describedby로 연결하고 오류 시 aria-invalid="true"를 제공한다. disabled와 readOnly를 같은 의미로 사용하지 않는다. 자동완성이 유용한 값에는 적절한 autoComplete를 지정한다.

좁은 화면과 긴 콘텐츠

기본적으로 부모 너비를 채운다. 긴 값은 input 내부 scroll로 유지되지만 중요한 전체 값을 확인해야 하면 별도 preview나 충분한 너비를 제공한다. 좁은 화면에서 label과 input을 억지로 같은 행에 두지 말고 세로로 쌓는다.

공개 API

Input: React.ComponentProps<'input'>을 전달하는 native input wrapper

전용 variant, size, error, loading, 앞·뒤 slot prop은 없다.

예제

import { Input, Label } from '@classum/dot-design-system/ui';

export function CurriculumNameField() {
  return (
    <div className="grid gap-2">
      <Label htmlFor="curriculum-name">커리큘럼 이름</Label>
      <Input
        id="curriculum-name"
        name="curriculumName"
        aria-describedby="curriculum-name-help"
        placeholder="예: 신규 입사자 온보딩"
      />
      <p id="curriculum-name-help" className="text-sm text-muted-foreground">
        학습자 화면과 운영 목록에 표시돼요.
      </p>
    </div>
  );
}

피해야 할 사용

placeholder를 Label 대신 사용하지 않는다.
오류를 border 색만으로 전달하지 않는다.
입력 형식과 제한을 제출 후에만 알려주지 않는다.
숫자, 날짜처럼 native type이 유용한 값을 모두 text로 받지 않는다.
좁은 공간에 여러 Input을 한 행으로 밀어 넣지 않는다.

목적