기본, 보조, 악센트 및 의미 색상 변형이 포함된 CSS 전용 Tailwind CSS 입력입니다. xs-xl 크기, 접두사 및 접미사 애드온 슬롯, 고스트 스타일. WCAG AA 액세스 가능하며 Django, HTMX, Laravel, React 및 모든 스택에서 작동합니다.
입력 구성 요소는 텍스트 필드, 이메일, 비밀번호 및 기타 입력 유형을 통해 사용자 데이터를 캡처합니다. Frutjam 입력 시스템은 다양한 크기, 색상 및 유효성 검사 상태에 대한 Tailwind CSS 스타일을 갖춘 의미 체계 HTML 양식 컨트롤을 제공합니다. 접근성 및 반응형 동작을 위해 설계된 입력은 양식 검증 라이브러리 및 프레임워크와 원활하게 통합됩니다.
CSS 전용이며 JavaScript가 필요하지 않습니다. WCAG AA 액세스 가능 및 프레임워크에 구애받지 않음 — Django, HTMX, Laravel, React 및 모든 스택에서 작동합니다.
| 수업 | 유형 | 설명 |
|---|---|---|
| input | 베이스 | 스타일이 지정된 텍스트 입력 필드 |
| input-outline | 스타일 | 테두리가 보이는 투명 채우기 |
| input-soft | 스타일 | 음소거된 색조 배경 |
| input-ghost | 스타일 | 초점이 맞춰질 때까지 테두리가 보이지 않음 |
| input-dashed | 스타일 | 점선 테두리 스타일 |
| input-square | 스타일 | 국경 반경 없음 |
| input-disabled | 수정자 | 비입력 요소에 대한 비활성화된 모양 |
| input-xs | 크기 | 아주 작은 |
| input-sm | 크기 | 작은 |
| input-md | 크기 | 중간(기본값) |
| input-lg | 크기 | 크기가 큰 |
| input-xl | 크기 | 특대 |
| input-2xl | 크기 | 2× 특대형 |
| input-primary | 색상 | 기본 테마 색상 테두리 |
| input-secondary | 색상 | 보조 테마 색상 테두리 |
| input-accent | 색상 | 악센트 테마 색상 테두리 |
| input-neutral | 색상 | 중립 테마 색상 테두리 |
| input-info | 색상 | 정보 의미 색상 테두리 |
| input-success | 색상 | 성공 의미 색상 테두리 |
| input-warning | 색상 | 경고 의미 색상 테두리 |
| input-error | 색상 | 오류 의미 색상 테두리 |
기본 사용법
<input type="text" placeholder="Enter your text here" class="input"> |
<input type="text" placeholder="Enter your text here" className="input"> |
입력 크기
html
1 2 3 4 5 6 | <input type="text" class="input input-xs" placeholder="Xsmall"> <input type="text" class="input input-sm" placeholder="Small"> <input type="text" class="input input-md" placeholder="Medium"> <input type="text" class="input input-lg" placeholder="Large"> <input type="text" class="input input-xl" placeholder="Xlarge"> <input type="text" class="input input-2xl" placeholder="2XLarge"> |
입력 색상
html
1 2 3 4 5 6 7 8 9 | <input type="text" class="input" placeholder="Default"> <input type="text" class="input input-primary" placeholder="Primary"> <input type="text" class="input input-secondary" placeholder="Secondary"> <input type="text" class="input input-accent" placeholder="Accent"> <input type="text" class="input input-neutral" placeholder="Neutral"> <input type="text" class="input input-info" placeholder="Info"> <input type="text" class="input input-success" placeholder="Success"> <input type="text" class="input input-warning" placeholder="Warning"> <input type="text" class="input input-error" placeholder="Error"> |
입력 스타일
html
1 2 3 4 5 | <input type="text" class="input" placeholder="Default"> <input type="text" class="input input-outline" placeholder="Outline"> <input type="text" class="input input-soft" placeholder="Soft"> <input type="text" class="input input-dashed" placeholder="Dashed"> <input type="text" class="input input-ghost" placeholder="Ghost"> |
입력 제곱
OTP 또는 PIN 필드와 같은 고정 너비 단일 문자 입력에는 input-square를 사용하세요.
html
1 2 3 4 | <input type="text" class="input input-square input-xs" maxlength="1" placeholder="0"> <input type="text" class="input input-square input-sm" maxlength="1" placeholder="0"> <input type="text" class="input input-square input-md" maxlength="1" placeholder="0"> <input type="text" class="input input-square input-lg" maxlength="1" placeholder="0"> |
비활성화된 입력
html
1 2 | <input type="text" class="input" placeholder="Enabled input"> <input type="text" class="input input-disabled" placeholder="Disabled input" disabled> |
라벨로 입력
html
1 2 3 4 5 6 7 8 9 | <label> <span>Email address</span> <input type="email" class="input input-outline w-full" placeholder="you@example.com"> </label> <label> <span>Password</span> <input type="password" class="input input-outline input-primary w-full" placeholder="Enter password"> </label> |
Claude Code, Cursor 또는 다른 AI 편집기를 사용하시나요?
Cherry MCP는 AI 편집기에 요청 시 정확한 입력 클래스 이름과 구조를 제공합니다. 더 이상 환각에 빠진 수업은 없습니다.