TextInput

Import

import { TextInput } from '@vapor-ui/core';

<TextInput.Root>
  <TextInput.Label>Label</TextInput.Label>    
  <TextInput.Field />
</TextInput.Root>

이름	타입	기본값	설명
`type`	`'text'` \| `'email'` \| `'password'` \| `'url'` \| `'tel'` \| `'search'`	`'text'`	입력 필드의 HTML 타입을 지정합니다.
`value`	`string` \| `undefined`	`-`	제어형 컴포넌트로 사용할 때 입력 값입니다.
`defaultValue`	`string` \| `undefined`	`-`	비제어형 컴포넌트 초기 입력 값입니다.
`onValueChange`	`(value: string) => void` \| `undefined`	`-`	입력 값이 변경될 때 호출되는 콜백 함수입니다.
`size`	`'sm'` \| `'md'` \| `'lg'` \| `'xl'`	`'md'`	입력 필드의 크기를 설정합니다.
`disabled`	`boolean` \| `undefined`	`false`	입력 필드를 비활성화합니다.
`invalid`	`boolean` \| `undefined`	`false`	검증 오류 상태임을 나타냅니다.
`readOnly`	`boolean` \| `undefined`	`false`	읽기 전용으로 설정하여 값 변경을 방지합니다.
`visuallyHidden`	`boolean` \| `undefined`	`false`	Label을 시각적으로 숨기고 스크린 리더용으로만 제공합니다.
`placeholder`	`string` \| `undefined`	`-`	입력 필드가 비어 있을 때 표시되는 안내 텍스트입니다.

이름	타입	기본값	설명
`className`	`string` \| `undefined`	`-`	Label 요소에 적용할 추가 CSS 클래스를 지정합니다.
`children`	`React.ReactNode`	`-`	라벨에 표시할 텍스트 또는 요소입니다.

이름	타입	기본값	설명
`id`	`string` \| `undefined`	`-`	입력 필드의 id를 직접 지정할 수 있습니다. 지정하지 않으면 내부에서 자동 생성됩니다.
`className`	`string` \| `undefined`	`-`	입력 필드에 추가할 CSS 클래스를 지정합니다.

TextInput WAI-ARIA 표준에 기반한 웹 접근성(A11y)을 준수합니다. Vapor TextInput은 Radix 기능을 기반으로 구축되어 일부 웹 접근성은 Radix에서 제공하고 있습니다.

개발 시 준수해야 할 내용을 명시합니다.

Props	Description
label	텍스트 입력에는 명확하고 설명적인 가시적 레이블이 있어야 합니다. <label /> 요소를 사용하여 텍스트 입력에 접근 가능한 이름을 제공해야 합니다 추가 지침은 aria-describedby를 사용하여 프로그래밍 방식으로 입력과 연결해야 합니다 플레이스홀더 텍스트는 레이블을 대체할 수 없습니다. 플레이스홀더 텍스트는 입력에 값이 입력되면 사라지고, 색상 대비가 낮아 접근성 요구사항을 충족하지 못할 수 있습니다
<TextInput> <TextInput.Label>Label</TextInput.Label> <TextInput.Field /> </TextInput>
id	TextInput에 고유한 id 속성을 부여합니다.
<TextInput id="textInput"> <TextInput.Label htmlFor="textInput">Label</TextInput.Label> <TextInput.Field /> </TextInput>
htmlFor	연관된 레이블 요소에 htmlFor 속성을 사용하여 TextInput의 id 를 참조
<TextInput id="textInput"> <TextInput.Label htmlFor="textInput">Label</TextInput.Label> <TextInput.Field /> </TextInput>

컴포넌트 내부적으로 준수되고 있는 접근성 기능을 명시합니다.

Accessibility	Description
id	Props로 id와 htmlFor를 넘겨주지 않는 경우, 내부적으로 자동으로 생성해 줍니다.