폼과 선택@neumorphism-ui/input-group

Input Group

InputGroupInput 또는 InputGroupTextarea에 앞뒤 addon, 보조 텍스트, button을 조합합니다. root의 focus-within 상태가 그룹 전체에 하나의 focus 표현을 제공합니다.

@neumorphism-ui/input-group

Registry JSON

미리보기

검색

웹사이트

https://

메시지

설치

npx shadcn@latest add @neumorphism-ui/input-group

CLI가 npm 의존성, base 토큰, utils와 컴포넌트 소스를 순서대로 확인하고 설치합니다.

Registry를 처음 사용한다면 namespace 설정 을 먼저 완료하세요.

사용법

npx shadcn@latest add @neumorphism-ui/input-group @neumorphism-ui/label

Import

import {
  InputGroup,
  InputGroupAddon,
  InputGroupButton,
  InputGroupInput,
  InputGroupText,
} from "@/components/ui/input-group"
import { Label } from "@/components/ui/label"

Example

<div className="grid gap-2">
  <Label htmlFor="workspace">Workspace</Label>
  <InputGroup>
    <InputGroupAddon aria-hidden="true"><svg aria-hidden="true" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><circle cx="11" cy="11" r="7" /><path d="m20 20-4-4" /></svg></InputGroupAddon>
    <InputGroupInput id="workspace" defaultValue="soft-interface" />
    <InputGroupButton type="button">검색</InputGroupButton>
  </InputGroup>
</div>

API 레퍼런스

컴포넌트	속성	타입	기본값	설명
`InputGroup`	`children`필수	`React.ReactNode`	`—`	control, addon, text, button을 순서대로 배치합니다.
`InputGroup`	`aria-label / aria-labelledby`	`string`	`—`	role=group에 필요한 경우 그룹 전체의 이름을 제공합니다.
`InputGroupInput`	`native input props`	`React.ComponentProps<"input">`	`—`	id, name, type, value, onChange 등의 native 속성입니다.
`InputGroupTextarea`	`native textarea props`	`React.ComponentProps<"textarea">`	`—`	여러 줄 control의 native 속성입니다.
`InputGroupButton`	`type`	`"button" \| "submit" \| "reset"`	`"button"`	그룹 action의 버튼 유형입니다.

미리보기

설치

사용법

Import

Example

API 레퍼런스

접근성