TextField

<TextField /> 는 사용자가 문자, 숫자, 기호를 입력할 수 있는 컴포넌트입니다.

// import { TextField } from '@vibrant-ui/components' <TextField />

// import { TextField } from '@vibrant-ui/components'
<TextField />

Loading...

How to use

import { TextField } from '@vibrant-ui/components';

Properties

Prop	Type	Default	Description
label	string | undefined	undefined	TextField 라벨
placeHolder	string | undefined	undefined	사용자가 값을 입력하기 전에 TextField 에 보여지는 텍스트
type	text | email | url | number	text	TextField 의 입력값 타입. 동적 키패드들이 있는 몇몇 장치에서 관련된 키보드가 제공됩니다. ( password 타입을 설정하고 싶은 경우, PasswordField 컴포넌트를 사용하세요 )
clearable	boolean	false	입력 초기화 버튼 설정 여부
prefix	string | undefined	undefined	접두사 텍스트
suffix	string | undefined	undefined	접미사 텍스트
renderStart	() => ReactElementChild | undefined	undefined	TextField 앞에 위치하는 요소
renderEnd	() => ReactElementChild | undefined	undefined	TextField 뒤에 위치하는 요소
autoCapitalize	none | character | sentences | words	none	입력값을 어떤 형식에 따라 자동 대문자화할지 설정
autoComplete	none email password newPassword username name familyName givenName middleName namePrefix nameSuffix ccNumber ccExp ccExpMonth ccExpYear ccCsc postalCode addressCountry addressRegion addressCity addressStreet addressExtended otp tel birthDayDay birthDayMonth birthDayYear birthDayFull	none	사용자 에이전트의 자동완성을 허용할 양식 입력 필드
readOnly	boolean	false	TextField 의 입력값 수정 허용 여부

Example Usage

// import { TextField } from '@vibrant-ui/components' <VStack spacing={20}> <TextField id="default" /> <TextField id="label" label="Label with Placeholder" placeholder="Placeholder" /> <TextField id="placeholder" placeholder="Placeholder" /> <TextField id="error-state" state="error" /> <TextField id="helper-text" helperText="TextField with helper text" /> <TextField id="clearable" clearable={true} placeholder="Enter something to see clear button" /> <TextField id="prefix-suffix" prefix="prefix" suffix="suffix" placeholder="Focus on here to see prefix and suffix" /> <TextField id="render-addons" renderEnd={() => ( <Icon.Star.Thin size={20} fill="onView2" /> )} renderStart={() => ( <Icon.Add.Thin size={20} fill="onView2" /> )} /> </VStack>

// import { TextField } from '@vibrant-ui/components'

<VStack spacing={20}>
  <TextField id="default" />
  <TextField
    id="label"
    label="Label with Placeholder"
    placeholder="Placeholder"
  />
  <TextField id="placeholder" placeholder="Placeholder" />
  <TextField id="error-state" state="error" />
  <TextField
    id="helper-text"
    helperText="TextField with helper text"
  />
  <TextField
    id="clearable"
    clearable={true}
    placeholder="Enter something to see clear button"
  />
  <TextField
    id="prefix-suffix"
    prefix="prefix"
    suffix="suffix"
    placeholder="Focus on here to see prefix and suffix"
  />
  <TextField
    id="render-addons"
    renderEnd={() => (
      <Icon.Star.Thin size={20} fill="onView2" />
    )}
    renderStart={() => (
      <Icon.Add.Thin size={20} fill="onView2" />
    )}
  />
</VStack>

Loading...