91 lines
2.6 KiB
Markdown
91 lines
2.6 KiB
Markdown
# daisyUI Documentation - Input Component
|
|
|
|
Text Input is a simple input field.
|
|
|
|
## Classes and Usage
|
|
|
|
### Core Classes:
|
|
- **input** - The main input element
|
|
- **input-bordered** - Bordered input style
|
|
- **input-ghost** - Ghost input style
|
|
- **input-primary** - Primary color input
|
|
- **input-secondary** - Secondary color input
|
|
- **input-accent** - Accent color input
|
|
- **input-neutral** - Neutral color input
|
|
- **input-info** - Info color input
|
|
- **input-success** - Success color input
|
|
- **input-warning** - Warning color input
|
|
- **input-error** - Error color input
|
|
- **input-xs** - Extra small size
|
|
- **input-sm** - Small size
|
|
- **input-md** - Medium size [Default]
|
|
- **input-lg** - Large size
|
|
- **input-xl** - Extra large size
|
|
- **input-disabled** - Disabled state
|
|
- **input-readonly** - Read-only state
|
|
|
|
## Examples
|
|
|
|
### Basic Input
|
|
|
|
```html
|
|
<input type="text" class="input" placeholder="Type here" />
|
|
```
|
|
|
|
### Input with Border Style
|
|
|
|
```html
|
|
<input type="text" class="input input-bordered" placeholder="Type here" />
|
|
```
|
|
|
|
### Input with Ghost Style
|
|
|
|
```html
|
|
<input type="text" class="input input-ghost" placeholder="Type here" />
|
|
```
|
|
|
|
### Input Sizes
|
|
|
|
```html
|
|
<input type="text" class="input input-xs" placeholder="Extra small" />
|
|
<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="Extra large" />
|
|
```
|
|
|
|
### Input Colors
|
|
|
|
```html
|
|
<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" />
|
|
```
|
|
|
|
### Input with Disabled State
|
|
|
|
```html
|
|
<input type="text" class="input" placeholder="You can't touch this" disabled />
|
|
```
|
|
|
|
### Input with Read-only State
|
|
|
|
```html
|
|
<input type="text" class="input" value="This is read-only" readonly />
|
|
```
|
|
|
|
## Features
|
|
|
|
- Simple text input styling
|
|
- Multiple size options (xs, sm, md, lg, xl)
|
|
- Multiple color variants
|
|
- Border and ghost styles
|
|
- Disabled and read-only states
|
|
- Responsive design
|
|
|
|
This component is useful for creating styled text inputs that blend seamlessly with the rest of your daisyUI interface. |