ResponsiveInput

Description

반응형 크기를 지원하는 Input 컴포넌트입니다. 화면 크기에 따라 자동으로 크기를 조정하며, 다양한 variant와 size 옵션을 제공합니다.

"use client";

import { ResponsiveInput } from "@/registry/ui/responsive-input";

export const ResponsiveInputDemo = () => {
  return (
    <ResponsiveInput
      variant="default"
      size="default"
      placeholder="반응형 Input"
    />
  );
};

Installation

pnpx shadcn add @allra/responsive-input

Usage

import { ResponsiveInput } from "@/registry/ui/responsive-input";

<ResponsiveInput
  placeholder="입력하세요..."
  variant="default"
  size="default"
/>

Props

Prop	Type	Default	Description
`variant`	`default` \| `destructive`	`default`	입력 필드의 스타일 변형
`size`	`xs` \| `sm` \| `default` \| `lg`	`default`	입력 필드의 크기
`responsiveSize`	`ResponsiveSizeConfig`	`undefined`	반응형 크기 설정
`error`	`boolean`	`false`	에러 상태 여부
`disabled`	`boolean`	`false`	비활성화 상태 여부
`type`	`string`	`text`	입력 타입
`className`	`string`	`''`	추가 CSS 클래스

Features

반응형 크기: 화면 크기에 따라 자동으로 크기 조정
- xs: 24px 높이
- sm: 36px 높이
- default: 40px 높이
- lg: 48px 높이
Breakpoint 기반: 768px (sm), 1024px (md), 1280px (lg)
다양한 Variant: default, destructive 스타일 지원
에러 상태: 에러 시 빨간색 테두리 표시
비활성화: disabled 상태에서 회색 배경 표시

Examples

다양한 Props 예시

다양한 Size

Input의 다양한 크기를 보여줍니다.

<ResponsiveInputDemo size="xs" placeholder="Extra Small" />

<ResponsiveInputDemo size="sm" placeholder="Small" />

<ResponsiveInputDemo size="default" placeholder="Default" />

<ResponsiveInputDemo size="lg" placeholder="Large" />

Destructive Variant

에러나 경고를 표시하는 destructive variant입니다.

<ResponsiveInputDemo variant="destructive" placeholder="Destructive" />

에러 상태

에러 상태에서의 컴포넌트 동작을 보여줍니다.

<ResponsiveInputDemo error placeholder="에러 상태" />

비활성화 상태

비활성화 상태에서의 컴포넌트 동작을 보여줍니다.

<ResponsiveInputDemo disabled placeholder="비활성화" />

On this page