Input

다양한 타입을 지원하는 텍스트 입력 필드입니다.

Installation

bash

npx axis-cli add input

Usage

tsx

import { Input } from '@axis-ds/ui-react'

export function Example() {
  return <Input type="email" placeholder="Email" />
}

With Label

tsx

import { Input, Label } from '@axis-ds/ui-react'

export function Example() {
  return (
    <div className="grid w-full max-w-sm items-center gap-1.5">
      <Label htmlFor="email">Email</Label>
      <Input type="email" id="email" placeholder="Email" />
    </div>
  )
}

With Button

tsx

<div className="flex w-full max-w-sm items-center space-x-2">
  <Input type="email" placeholder="Email" />
  <Button type="submit">Subscribe</Button>
</div>

Disabled

tsx

<Input disabled type="email" placeholder="Email" />

File Input

tsx

<Input type="file" />

Props

Prop	Type	Default	Description
`type`	`string`	"text"	Input 타입 (text, email, password 등)
`placeholder`	`string`	-	플레이스홀더 텍스트
`disabled`	`boolean`	false	비활성화 상태
`className`	`string`	-	추가 CSS 클래스

type

Type:string

Default:"text"

Input 타입 (text, email, password 등)

placeholder

Type:string

Default:-

플레이스홀더 텍스트

disabled

Type:boolean

Default:false

비활성화 상태

className

Type:string

Default:-

추가 CSS 클래스

Accessibility

네이티브 input 요소로 브라우저 기본 접근성을 따릅니다.

Key	Action
`표준 텍스트 편집`	네이티브 캐럿 이동/선택/편집을 지원합니다.

Label로 연결하거나 aria-label로 접근 가능한 이름을 제공하세요.
오류 상태는 aria-invalid와 설명(aria-describedby)으로 전달하세요.