Input

Input is a universal component for all DaisyUI input field types. It can be used for single-line text, password, email, number, date, time, and more. The component supports direct rendering as an input or, when using its slot, acts as a form control that exposes value, setter, and v-model composable for advanced usage.

Supports many DaisyUI input types via the type prop.
Use the validator prop to enable validation styling.
Use the slot for custom rendering, validation, and advanced form control scenarios.

See below for API details and usage examples.

Input pairs with the Label component. See the Label examples.

Basic Usage

A simple input with a placeholder.

Code Example

Basic.vue

Components

Input is a standalone component.

Input

The Input component provides a styled input for text, password, email, number, date, time, and more. It supports direct rendering as an input or advanced usage via its slot, exposing value, setter, and a v-model composable for custom controls.

Input Props	Type	Description
modelValue	string \| number \| null	v-model The current input value.
type	string	Sets the input type. default: 'text' Options: `text`, `password`, `email`, `number`, `date`, `datetime-local`, `week`, `month`, `tel`, `url`, `search`, `time`.
placeholder	string	Placeholder text for the input.
disabled	boolean	Disables the input.
validator	boolean	Adds the `validator` class for input validation styling.
color	string	Sets the color theme. Options: `primary`, `secondary`, `accent`, `info`, `success`, `warning`, `error`.
primary	boolean	Set color to primary.
secondary	boolean	Set color to secondary.
accent	boolean	Set color to accent.
info	boolean	Set color to info.
success	boolean	Set color to success.
warning	boolean	Set color to warning.
error	boolean	Set color to error.
join	boolean	Adds the 'join-item' class for use inside a group.
ghost	boolean	Makes the input transparent until focused.
size	'xl' \| 'lg' \| 'md' \| 'sm' \| 'xs'	Sets the input size. Options: `xl`, `lg`, `md`, `sm`, `xs`.
xl	boolean	Set size to xl.
lg	boolean	Set size to lg.
md	boolean	Set size to md.
sm	boolean	Set size to sm.
xs	boolean	Set size to xs.

Input Props

Type

Description

modelValue

string | number | null

v-model The current input value.

type

string

Sets the input type.
default: 'text'
Options: text, password, email, number, date, datetime-local, week, month, tel, url, search, time.

placeholder

string

Placeholder text for the input.

disabled

boolean

Disables the input.

validator

boolean

Adds the validator class for input validation styling.

color

string

Sets the color theme. Options: primary, secondary, accent, info, success, warning, error.

primary

boolean

Set color to primary.

secondary

boolean

Set color to secondary.

accent

boolean

Set color to accent.

info

boolean

Set color to info.

success

boolean

Set color to success.

warning

boolean

Set color to warning.

error

boolean

Set color to error.

join

boolean

Adds the 'join-item' class for use inside a group.

ghost

boolean

Makes the input transparent until focused.

size

'xl' | 'lg' | 'md' | 'sm' | 'xs'

Sets the input size. Options: xl, lg, md, sm, xs.

boolean

Set size to xl.

boolean

Set size to lg.

boolean

Set size to md.

boolean

Set size to sm.

boolean

Set size to xs.

Input Events	Arguments	Description
update:modelValue		v-model Emitted when the input value changes.

Input Events

Arguments

Description

update:modelValue

v-model Emitted when the input value changes.

Input Slots	Description
default	The default slot. When used, the component acts as a form control and provides slot props for advanced usage: - `value`: The current value (ref, usable with v-model) - `setValue`: Function to update the value - `inputAttrs`: All attributes and classes for the input element - `props`: All props passed to the component - `inputModel`: A composable (ref) for two-way binding inside the slot

Input Slots

Description

default

The default slot. When used, the component acts as a form control and provides slot props for advanced usage: - value: The current value (ref, usable with v-model) - setValue: Function to update the value - inputAttrs: All attributes and classes for the input element - props: All props passed to the component - inputModel: A composable (ref) for two-way binding inside the slot