Field.TextInput

Field.TextInput은 Field 안에서 한 줄 텍스트를 받는 네이티브 <input>입니다. value는 문자열입니다. 이벤트가 필요하면 onChange를, 새 문자열만 필요하면 onValueChange를 넘기거나 둘 다 넘기세요. 둘 다 없으면 입력은 읽기 전용입니다. type은 text, search, email, url, tel, password를 받습니다. 비밀번호의 보기 버튼이 text로 바꿀 때처럼 입력에 포커스가 있는 동안 type이 바뀌어도 캐럿은 있던 자리에 남습니다. 숫자는 Field.NumberInput입니다. 입력한 날짜, 날짜 범위, 시각, 날짜와 시각은 Field.DatePicker, Field.DateRangePicker, Field.TimePicker, Field.DateTimePicker 옆에서 parseDate, parseDateRange, parseTime, parseDateTime으로 읽으세요. id는 Field.Root에 두세요.

const id = useId();

<Field.Group>
  <Label.Root htmlFor={id}>Email</Label.Root>
  <Field.Root id={id}>
    <Field.TextInput value={v} onChange={(event) => setV(event.target.value)} />
  </Field.Root>
</Field.Group>

접근성을 지키는 조합

Todae가 맡는 것: 입력은 Field.Root에서 id, name, aria-label, aria-labelledby, aria-describedby를 받고, Root나 바깥 Fieldset에서 네이티브 disabled와 aria-invalid를 받습니다.

직접 제공할 것: 이름. htmlFor가 Root id인 Label이나, Root의 aria-label / aria-labelledby입니다.

주의할 점: Field.TextInput에 준 id는 Root의 id로 바뀝니다. id는 Root에 두세요.

언제 쓰나요

Field.TextInput

언제: Field.Root 안에서 한 줄로 입력하는 값(text / search / email / url / tel / password).

쓰지 않을 때: 숫자 → Field.NumberInput. 시각 → Field.TimePicker. 날짜 범위 → Field.DateRangePicker. 날짜와 시각 → Field.DateTimePicker. 여러 값의 토큰 → Field.ChipInput. 여러 줄 → Field.Textarea. Root 없이 단독으로 쓸 때.

Props