Data InputTextInput20 props
Text Input
TextInput collects short-form text like names, emails, or search queries. Use it for single-line values where the expected input is brief. Pair it with validation status to guid...
공식 문서 열기Preview
Controlled input with clear button and status feedback.
Ready to search
Import
import {TextInput} from '@astryxdesign/core/TextInput';Astryx 문서 권장 방식대로 root barrel이 아니라 컴포넌트 subpath에서 가져옵니다.
When to use
TextInput collects short-form text like names, emails, or search queries. Use it for single-line values where the expected input is brief. Pair it with validation status to guid...
textinputtextfieldinputsearchclearableprefixsuffixadornment
Important props
typetext | password | emailoptional
changeAction(value: string, e: ChangeEvent<HTMLInputElement>) => void | Promise<void>optional
sizesm | md | lgoptional
status{type: error | warning | success, message?: string}optional
Theming targets
astryx-text-input
Best practices
- DoAlways provide a visible label so users know what the field is for. Only hide the label when surrounding context makes it obvious, like a search bar with a magnifying-glass icon.
- DoUse validation status with a message to explain what went wrong: "Email must include @" is better than just turning the border red.
- DoSize the input to match the expected content length so users can gauge how much to type: small for zip codes, medium for names, large for URLs.
- DoAdd a clear button for search and filter inputs so users can quickly reset without selecting all text.