daisyUI Kit 🌼

TextInput

TextInput is a simple input field.

Code Example 
<script setup lang="ts">
const value = ref('')
</script>

<template>
  <TextInput v-model="value" placeholder="Type here" />
</template>

Components

TextInput is a standalone component.

TextInput

TextInput can be customized with the following props:

PropTypeDescription
model-value
string
Sets the text value. Use with v-model
placeholder
string
Sets the placeholder
type
string
Set the type of input to text, phone, email, search, password, or number.
join
boolean
Use inside Join to group items together.
color
string
Sets the color to one of the below prop names.
   
neutral
boolean
Sets the color to neutral.
   
primary
boolean
Sets the color to primary.
   
secondary
boolean
Sets the color to secondary.
   
accent
boolean
Sets the color to accent.
   
info
boolean
Sets the color to info.
   
success
boolean
Sets the color to success.
   
warning
boolean
Sets the color to warning.
   
error
boolean
Sets the color to error.
bordered
boolean
Enables the bordered style on the button
ghost
boolean
Enables the ghost style on the button
disabled
boolean
Disables the button both visually and functionally.
size
string
Sets the size. Can be set to one of the below size prop names.
    lg
boolean
Sets the size to lg
    md
boolean
Sets the size to md (the default)
    sm
boolean
Sets the size to sm
    xs
boolean
Sets the size to xs

Color

Code Example 
<script setup lang="ts">
const value = ref('')
</script>

<template>
  <TextInput v-model="value" primary />
</template>

Bordered

Code Example 
<script setup lang="ts">
const value = ref('')
</script>

<template>
  <TextInput v-model="value" placeholder="Type here" bordered />
</template>

Ghost

Code Example 
<script setup lang="ts">
const value = ref('')
</script>

<template>
  <TextInput v-model="value" placeholder="Type here" ghost />
</template>

Disabled

Code Example 
<script setup lang="ts">
const value = ref('')
</script>

<template>
  <TextInput v-model="value" disabled />
</template>

Size

Code Example 
<script setup lang="ts">
const value = ref('')
</script>

<template>
  <TextInput v-model="value" lg />
</template>

With FormControl and Label

Code Example 
<script setup lang="ts">
const value = ref('')
</script>

<template>
  <FormControl class="w-full max-w-xs">
    <Label>
      <LabelText>What is your name?</LabelText>
      <LabelTextAlt>Alt label</LabelTextAlt>
    </Label>
    <TextInput
      v-model="value"
      bordered
      placeholder="Type here"
      class="w-full max-w-xs"
    >
      <Label>
        <LabelTextAlt>Alt label</LabelTextAlt>
        <LabelTextAlt>Alt label</LabelTextAlt>
      </Label>
    </TextInput>
  </FormControl>
</template>