Components

Component

TextFieldInput

Single-line text input used inside a TextField wrapper.

ReactReact Native12 props
PreviewReact

설명을 써주세요

글 제목 또는 내용으로 검색할 수 있습니다.

cm

직접 측정 후 입력해주세요.

오류가 발생한 이유를 써주세요

Imports

import { TextField, TextFieldInput } from "@hozorica/hods-react/text-field";
import { TextField, TextFieldInput } from "@hozorica/hods-react-native/text-field";

Props

PropTypeDescription
labelReactNodeOptional visible field label.
descriptionReactNodeHelper text below the input.
errorMessageReactNodeError text below the input.
prefix / suffixReactNodeText affixes rendered inside the field chrome.
prefixIcon / suffixIconReactNodeIcon affixes rendered inside the field chrome.
variantoutline | underlineField chrome style. Defaults to outline.
sizemedium | largeField height density.
disabled / readOnly / invalid / requiredbooleanState flags passed to the input.
value / defaultValuestringControlled and uncontrolled field value.
maxGraphemeCountnumberLimits and counts user-perceived characters.
onValueChange(details) => voidReceives value, graphemes, slicedValue, and slicedGraphemes.
asChildbooleanTextFieldInput web-only custom input composition.

Platform Support

React

Compound field with label, description, error message, affixes, controlled value, and asChild input slot.

React Native

TextInput-based field with matching label, helper/error text, affixes, and grapheme count concepts.

Usage

<TextField label="라벨"><TextFieldInput placeholder="플레이스홀더" /></TextField>

Notes

  • Render TextFieldInput only inside TextField.
  • Use label when possible; provide aria-label on TextFieldInput for label-less underline fields.
  • Icon-only affixes need accessible context from label or description, or an explicit accessible name.