Input

Neobrutalist-styled text input with variants, sizes, and v-model two-way binding.

Demo

Preview

变体

尺寸

状态

图标与装饰

https://

.com

辅助能力

0 / 24

v-model 绑定

值：

冲压凹槽形态（inset）

Installation

pnpm dlx brutx-vue@latest add input

Usage

<script setup>
import { ref } from 'vue'
import { Input } from 'brutx-ui-vue'

const value = ref('')
</script>

<template>
    <Input v-model="value" placeholder="Enter your name..." />
</template>

With Label

<script setup>
import { ref } from 'vue'
import { Input, Label } from 'brutx-ui-vue'

const email = ref('')
</script>

<template>
    <div class="space-y-2">
        <Label for="email">Email</Label>
        <Input id="email" v-model="email" type="email" placeholder="you@example.com" />
    </div>
</template>

Disabled State

<script setup>
import { Input } from 'brutx-ui-vue'
</script>

<template>
    <Input disabled placeholder="Disabled input" />
</template>

Readonly State

Set a readonly input via the readonly prop. In readonly state, the input is not editable but remains focusable for text selection. The cursor style is cursor-default, and opacity is not reduced (unlike disabled).

<script setup>
import { ref } from 'vue'
import { Input } from 'brutx-ui-vue'

const value = ref('Readonly content, selectable and copyable but not editable')
</script>

<template>
    <Input v-model="value" readonly />
</template>

Clearable

Add a clear button that appears on hover when the input has a value.

<script setup>
import { ref } from 'vue'
import { Input } from 'brutx-ui-vue'

const value = ref('Clear me!')
</script>

<template>
    <Input v-model="value" clearable @clear="value = ''" />
</template>

Password Toggle

Show a password visibility toggle button for password inputs.

<script setup>
import { ref } from 'vue'
import { Input } from 'brutx-ui-vue'

const password = ref('')
</script>

<template>
    <Input v-model="password" type="password" show-password placeholder="Enter password" />
</template>

Word Limit

Show character count when show-word-limit and maxlength are both set.

<script setup>
import { ref } from 'vue'
import { Input } from 'brutx-ui-vue'

const value = ref('')
</script>

<template>
    <Input v-model="value" maxlength="100" show-word-limit placeholder="Max 100 characters" />
</template>

Icons And Addons

Prefer the built-in prefixIcon, suffixIcon, prepend, and append APIs on Input for input adornments.

<script setup>
import { ref } from 'vue'
import { Input } from 'brutx-ui-vue'
import { Search } from '@lucide/vue'

const url = ref('')
</script>

<template>
    <Input :prefix-icon="Search" placeholder="Search projects" />

    <Input v-model="url" placeholder="Enter URL">
        <template #prepend>https://</template>
        <template #append>.com</template>
    </Input>
</template>

Variants

Variant	Description
default	Standard border with hover lift and cover-shadow press; shadow enlarges on focus
error	Error border with primary shadow on focus
success	Success border with secondary shadow on focus
inset	Stamped groove: static recessed form (inset shadow) with deliberately no hover/press/focus-lift feedback — the physical metaphor is "sunk into the shell"

<template>
    <Input v-model="value" variant="inset" placeholder="Stamped groove form" />
</template>

Sizes

Size	Height	Padding	Font Size
sm	h-9	px-3 py-1	text-sm
default	h-11	px-4 py-2	text-base
lg	h-14	px-5 py-3	text-lg

API Reference

Input — Props

Name	Type	Default	Description
type	HTMLInputType | undefined	"text"	The native input type, which selects the browser-provided input behavior.
Details Declared type HTMLInputType | undefined Literal values "button" "checkbox" "color" "date" "datetime-local" "email" "file" "hidden" "image" "month" "number" "password" "radio" "range" "reset" "search" "submit" "tel" "text" "time" "url" "week" Referenced types HTMLInputType Type definition — HTMLInputType type HTMLInputType = | 'button' | 'checkbox' | 'color' | 'date' | 'datetime-local' | 'email' | 'file' | 'hidden' | 'image' | 'month' | 'number' | 'password' | 'radio' | 'range' | 'reset' | 'search' | 'submit' | 'tel' | 'text' | 'time' | 'url' | 'week' Default value details Declaration 'text' Source: packages/ui/src/components/input/Input.vue Resolved value "text" Source Input.vue:38 packages/ui/src/components/input/Input.vue
modelValue	string | undefined	undefined	The current input value, available for controlled binding with v-model.
Details Declared type string | undefined Default value details Declaration undefined Source: packages/ui/src/components/input/Input.vue Resolved value undefined Source Input.vue:39 packages/ui/src/components/input/Input.vue
variant	"default" | "error" | "inset" | "success" | undefined	"default"	The visual input variant. The error variant enables error styling and error-state semantics.
Details Declared type NonNullable<"default" | "success" | "error" | "inset" | null | undefined> | undefined Literal values "default" "error" "inset" "success" Default value details Declaration 'default' Source: packages/ui/src/components/input/Input.vue Resolved value "default" Source Input.vue:40 packages/ui/src/components/input/Input.vue
size	"default" | "lg" | "sm" | undefined	"default"	The input size variant.
Details Declared type NonNullable<"default" | "lg" | "sm" | null | undefined> | undefined Literal values "default" "lg" "sm" Default value details Declaration 'default' Source: packages/ui/src/components/input/Input.vue Resolved value "default" Source Input.vue:41 packages/ui/src/components/input/Input.vue
disabled	boolean | undefined	false	Disables the native input and its interaction.
Details Declared type boolean | undefined Literal values false true Default value details Declaration false Source: packages/ui/src/components/input/Input.vue Resolved value false Source Input.vue:42 packages/ui/src/components/input/Input.vue
readonly	boolean | undefined	false	Prevents editing while still allowing focus and text selection.
Details Declared type boolean | undefined Literal values false true Default value details Declaration false Source: packages/ui/src/components/input/Input.vue Resolved value false Source Input.vue:43 packages/ui/src/components/input/Input.vue
placeholder	string | undefined	undefined	Placeholder text shown when the input value is empty.
Details Declared type string | undefined Default value details Declaration undefined Source: packages/ui/src/components/input/Input.vue Resolved value undefined Source Input.vue:44 packages/ui/src/components/input/Input.vue
maxlength	number | undefined	undefined	The maximum character count passed to the native input; it also supplies the limit shown by showWordLimit.
Details Declared type number | undefined Default value details Declaration undefined Source: packages/ui/src/components/input/Input.vue Resolved value undefined Source Input.vue:46 packages/ui/src/components/input/Input.vue
autocomplete	string | undefined	undefined	The autofill hint passed to the browser, such as email or current-password.
Details Declared type string | undefined Default value details Declaration undefined Source: packages/ui/src/components/input/Input.vue Resolved value undefined Source Input.vue:48 packages/ui/src/components/input/Input.vue
clearable	boolean | undefined	false	Enables the clear button, shown only when the input has a value and is neither disabled nor read-only.
Details Declared type boolean | undefined Literal values false true Default value details Declaration false Source: packages/ui/src/components/input/Input.vue Resolved value false Source Input.vue:50 packages/ui/src/components/input/Input.vue
showPassword	boolean | undefined	false	Shows a password visibility toggle for password inputs; toggling changes the native input type.
Details Declared type boolean | undefined Literal values false true Default value details Declaration false Source: packages/ui/src/components/input/Input.vue Resolved value false Source Input.vue:52 packages/ui/src/components/input/Input.vue
showWordLimit	boolean | undefined	false	Shows the current character count and maximum length when maxlength is provided.
Details Declared type boolean | undefined Literal values false true Default value details Declaration false Source: packages/ui/src/components/input/Input.vue Resolved value false Source Input.vue:54 packages/ui/src/components/input/Input.vue
prefixIcon	ConcreteComponent | (() => Component) | undefined	undefined	An icon component rendered before the input control.
Details Declared type ConcreteComponent | (() => Component) | undefined Default value details Declaration undefined Source: packages/ui/src/components/input/Input.vue Resolved value undefined Source Input.vue:56 packages/ui/src/components/input/Input.vue
suffixIcon	ConcreteComponent | (() => Component) | undefined	undefined	An icon component rendered after the input control.
Details Declared type ConcreteComponent | (() => Component) | undefined Default value details Declaration undefined Source: packages/ui/src/components/input/Input.vue Resolved value undefined Source Input.vue:58 packages/ui/src/components/input/Input.vue
errorMessage	string | undefined	undefined	Error text shown in the error state and exposed as the error description for assistive technology.
Details Declared type string | undefined Default value details Declaration undefined Source: packages/ui/src/components/input/Input.vue Resolved value undefined Source Input.vue:60 packages/ui/src/components/input/Input.vue
id	string | undefined	undefined	The native input ID. When omitted, useId generates a unique ID for the instance.
Details Declared type string | undefined Default value details Declaration undefined Source: packages/ui/src/components/input/Input.vue Resolved value undefined Source Input.vue:62 packages/ui/src/components/input/Input.vue
ariaLabel	string | undefined	undefined	The accessible name passed to the native input.
Details Declared type string | undefined Default value details Declaration undefined Source: packages/ui/src/components/input/Input.vue Resolved value undefined Source Input.vue:64 packages/ui/src/components/input/Input.vue
ariaLabelledby	string | undefined	undefined	The ID of the label element passed to the native input.
Details Declared type string | undefined Default value details Declaration undefined Source: packages/ui/src/components/input/Input.vue Resolved value undefined Source Input.vue:66 packages/ui/src/components/input/Input.vue
ariaDescribedby	string | undefined	undefined	The ID of a descriptive element passed to the native input.
Details Declared type string | undefined Default value details Declaration undefined Source: packages/ui/src/components/input/Input.vue Resolved value undefined Source Input.vue:68 packages/ui/src/components/input/Input.vue
ariaInvalid	boolean | undefined	undefined	Explicitly sets the input invalid state; when omitted, it is derived from whether variant is error.
Details Declared type boolean | undefined Literal values false true Default value details Declaration undefined Source: packages/ui/src/components/input/Input.vue Resolved value undefined Source Input.vue:70 packages/ui/src/components/input/Input.vue
ariaErrormessage	string | undefined	undefined	The ID of the error message element passed to the native input.
Details Declared type string | undefined Default value details Declaration undefined Source: packages/ui/src/components/input/Input.vue Resolved value undefined Source Input.vue:72 packages/ui/src/components/input/Input.vue
ariaRequired	boolean | undefined	undefined	The required state passed to the native input.
Details Declared type boolean | undefined Literal values false true Default value details Declaration undefined Source: packages/ui/src/components/input/Input.vue Resolved value undefined Source Input.vue:74 packages/ui/src/components/input/Input.vue
class	string | undefined	undefined	Custom CSS classes added to the input container.
Details Declared type string | undefined Default value details Declaration undefined Source: packages/ui/src/components/input/Input.vue Resolved value undefined Source Input.vue:75 packages/ui/src/components/input/Input.vue

Input — Events

Name	Signature or type	Description
@update:modelValue	[value: string]	Emits the new string value for v-model when user input changes; intermediate values are suppressed during IME composition.
Details Declared type [value: string] Source Input.vue packages/ui/src/components/input/Input.vue
@clear	[]	Emitted after a clear action updates the input value to an empty string.
Details Declared type [] Source Input.vue packages/ui/src/components/input/Input.vue

Input — Slots

Name	Signature or type	Description
#prepend	{}	Renders content before the input control. The prepend region is created only when this slot has content.
Details Declared type {} Source Input.vue packages/ui/src/components/input/Input.vue
#append	{}	Renders content after the input control. The append region is created only when this slot has content.
Details Declared type {} Source Input.vue packages/ui/src/components/input/Input.vue

Input — Exposes

Name	Signature or type	Description
focus	() => void | undefined	Moves focus to the native input.
Details Declared type () => void | undefined Source Input.vue:219 packages/ui/src/components/input/Input.vue
blur	() => void | undefined	Removes focus from the native input.
Details Declared type () => void | undefined Source Input.vue:220 packages/ui/src/components/input/Input.vue
select	() => void | undefined	Selects the text in the native input.
Details Declared type () => void | undefined Source Input.vue:221 packages/ui/src/components/input/Input.vue
ref	Ref<HTMLInputElement | null, HTMLInputElement | null>	Exposes the internal input reference. Vue unwraps top-level refs on the public component instance, so reading its ref property returns the native HTMLInputElement.
Details Declared type Ref<HTMLInputElement | null, HTMLInputElement | null> Literal values null Source Input.vue packages/ui/src/components/input/Input.vue

Data Types

HTMLInputType contains the native input types supported by HTMLInputElement.type: button, checkbox, color, date, datetime-local, email, file, hidden, image, month, number, password, radio, range, reset, search, submit, tel, text, time, url, and week.

Programmatic Control

Use a component ref to call the native input operations below. See the API reference for all members.

<script setup>
import { ref } from 'vue'
import { Input } from 'brutx-ui-vue'

const inputRef = ref(null)
function handleFocus() {
    inputRef.value?.focus()
}
</script>

<template>
    <Input ref="inputRef" placeholder="Click button to focus" />
    <button @click="handleFocus">Focus Input</button>
</template>

Accessibility

Enhance input accessibility with ARIA attributes for assistive technologies (e.g. screen readers):

<script setup>
import { ref } from 'vue'
import { Input } from 'brutx-ui-vue'

const email = ref('')
</script>

<template>
    <Input
        v-model="email"
        type="email"
        aria-label="Email address"
        aria-required="true"
        aria-invalid="false"
        placeholder="you@example.com"
    />
</template>