BreezeUI
  • English

    • Input

    Displays a form input field or a component that looks like an input field.

    Component Features

    • 📏 Multiple Sizes: Supports xs, sm, md, lg, xl, 2xl, default size specs.
    • 🖼️ Prefix & Suffix Icons: Supports prefix and suffix icons via slots.
    • ❌ Clearable: Supports displaying a clear button when input has value.
    • 🔒 Password Mode: Supports password visibility toggle.
    • ⚠️ Error State: Supports error prop to display error state.
    • 📝 Readonly & Disabled: Supports readonly and disabled props.
    • 🎨 Theme Customization: Based on BrConfigProvider for global theming and TailwindCSS local overrides.

    Basic

    <script setup>
import { ref } from 'vue'
const inputValue = ref('')
</script>

<template>
  <div class="space-y-2">
    <BrInput v-model="inputValue" placeholder="Basic Input" />
    <p class="text-xs text-muted-foreground">Value: {{ inputValue }}</p>
  </div>
</template>

    Disabled

    <template>
<div class="space-y-2">
  <BrInput disabled placeholder="Disabled Input" />
</div>
</template>

    Readonly

    <template>
<div class="space-y-2">
  <BrInput readonly model-value="Readonly Input" />
</div>
</template>

    Sizes

    <template>
<div class="space-y-2">
  <BrInput size="xs" placeholder="Extra Small Input" />
  <BrInput size="sm" placeholder="Small Input" />
  <BrInput size="default" placeholder="Default Input" />
  <BrInput size="lg" placeholder="Large Input" />
  <BrInput size="xl" placeholder="Extra Large Input" />
  <BrInput size="2xl" placeholder="2 Extra Large Input" />
</div>
</template>

    With Icons

    <script setup>
import { Search, Mail } from 'lucide-vue-next'
</script>

<template>
  <div class="space-y-2">
    <BrInput placeholder="Search...">
      <template #prefix>
        <Search class="h-4 w-4" />
      </template>
    </BrInput>
    <BrInput placeholder="Email" autocomplete="off">
      <template #prefix>
        <Mail class="h-4 w-4" />
      </template>
    </BrInput>
  </div>
</template>

    Clearable

    <script setup>
import { ref } from 'vue'
const inputValue = ref('')
</script>

<template>
  <div class="space-y-2">
    <BrInput v-model="inputValue" clearable placeholder="Type to clear..." />
  </div>
</template>

    Password

    <script setup>
import { ref } from 'vue'
const password = ref('')
</script>

<template>
  <div class="space-y-2">
    <BrInput v-model="password" type="password" show-password placeholder="Enter password" autocomplete="new-password" />
  </div>
</template>

    Error State

    <template>
<div class="space-y-2">
  <BrInput error placeholder="Invalid input" />
</div>
</template>

    Theming

    You can customize the appearance of the input using Tailwind CSS classes or by overriding the CSS variables in your global CSS.

    CSS Variables

    :root {
  --input: 214.3 31.8% 91.4%;
  --ring: 222.2 84% 4.9%;
  --radius: 0.5rem;
}

.dark {
  --input: 217.2 32.6% 17.5%;
  --ring: 212.7 26.8% 83.9%;
}

    Tailwind Customization

    You can also use class prop to add custom styles:

    <BrInput class="border-blue-500 focus-visible:ring-blue-500" />

    API

    Props

    PropTypeDefaultDescription
    modelValuestring | number-The value of the input.
    defaultValuestring | number-The default value of the input.
    typestringtextHTML input type attribute.
    disabledbooleanfalseWhether the input is disabled.
    readonlybooleanfalseWhether the input is read-only.
    placeholderstring-Placeholder text.
    sizexs | sm | md | default | lg | xl | 2xldefaultThe size of the input.
    errorbooleanfalseWhether to show error state.
    clearablebooleanfalseWhether to show a clear button when input has value.
    showPasswordbooleanfalseWhether to show password toggle button (only works with type="password").

    Slots

    NameDescription
    prefixContent to display before the input text.
    suffixContent to display after the input text.

    Events

    NamePayloadDescription
    update:modelValuestring | numberEmitted when input value changes.
    clear-Emitted when the clear button is clicked.
    inputEventEmitted when the input value changes.
    changeEventEmitted when the input value changes (on blur or enter).
    focusEventEmitted when the input is focused.
    blurEventEmitted when the input is blurred.