Text input

The single-line field every form is built from, with its own label, message and counter, in four content shapes.

Refined portWildTextInput.vueWTextInput

Try it

Type, tab and paste into it. Paste a full address into website and the https:// comes off.

Site name

Use a name your team will recognise.

Type

Size

Icon

Clear button

Counter

Error

Read-only

Disabled

<WildTextInput
  v-model="siteName"
  size="sm"
  label="Site name"
  help="Use a name your team will recognise."
  clearable
>
  <template #leading>
    <MapPinIcon />
  </template>
</WildTextInput>

When to use

Use it for one line of free text.
Use a type for websites, amounts and counts.

Don’t use it

For more than one line. Use Textarea.
For a choice from a known list. Use Select.
For secrets or search. Use Password input or Search bar.

Anatomy

A label, the frame and a message line. Inside the frame: an optional icon, the value and a clear button once there’s a value.

Site nameKeep it short

Use a name your team will recognise.

Types

Four content shapes, each with a plain model.

Site name

Use a name your team will recognise.

Company website

Paste a full address or just the domain.

Monthly budget

Dollars, with or without cents.

Loggers

Between 1 and 50.

Website drops a pasted protocol. Currency stores 1250 and shows 1,250.00 once you leave. Quantity is a spinbutton with steppers.

Icon, clear and counter

Three opt-in additions. The icon is for the basic type only.

Contact email

Order reference

Escape clears it too.

Alarm name

Short name

Typing past the limit is allowed. The count turns red and the field is invalid until it fits, so a paste is never cut short.

Sizes

Use sm, at 36px, by default. Use lg, at 44px, where a field needs a bigger touch target.

sm · 36

lg · 44

States

empty

filled

hover

focus

error

error, focused

read-only

disabled

An invalid field ignores hover. Focused, it keeps the red edge and adds the focus ring outside it. Read-only stays in the tab order.

In context

Press Add site with the name empty. The error shows and focus moves to the field.

Inside a form field

Where a Form field already gives the label, help and error, use the bare box, WInput. It takes the same sizes, types and states.

Site name*

e.g. Bore 12

<WildFormField label="Site name" required>
  <WildTextInput placeholder="e.g. Bore 12" />
</WildFormField>

Content

Write labels as short nouns: Site name, Monthly budget.
Use the placeholder for an example value, never as the label.
Write the error as the fix: Enter a site name.

Accessibility

Help, error and limit are read with the input. The count is announced when typing pauses.

Key	What it does
Tab	Into the field, then to the clear button.
Escape	Clears a clearable field.
↑ / ↓	Quantity: one step.
Page Up / Page Down	Quantity: ten steps.
Home / End	Quantity: minimum or maximum.

Props

Prop	Type	Default	Description
v-model	string	—	The value, as a plain string.
type	'basic' \| 'website' \| 'currency' \| 'quantity'	'basic'	See Types.
size	'sm' \| 'lg'	'sm'	36px or 44px.
label	string	—	The visible name.
hint	string	—	Short context, right of the label.
help	string	—	Guidance under the field.
error	boolean \| string	false	A string is also the message.
required	boolean	false	Asterisk on the label, and aria-required.
placeholder	string	—	An example value.
aria-label	string	—	Names a field with no visible label.
readonly	boolean	false	Selectable but not editable.
disabled	boolean	false	Flat grey, out of the tab order.
clearable	boolean	false	Clear button once filled.
maxlength	number	—	A soft limit with a counter.
suffix	string	—	Trailing unit or currency code.
website-prefix / currency-symbol	string	'https://' / '$'	Website and currency prefixes.
min / max / step	number	0 / — / 1	Quantity bounds and step.
#leading	slot	—	Icon ahead of the text.
@clear	() => void	—	After a clear.

Tokens

Token	Value	Where it lands
--global-neutral-grey-600	#DCDCDE	Resting border, 1px.
--global-neutral-grey-800	#ADACB0	Hover border.
--global-blue-1000	#1877F2	Focus edge and halo, caret.
--color-error	#E12121	Error edge, message, over-limit count.
--global-neutral-grey-1100	#2D2B32	Value text.
--global-neutral-grey-900	#7F7D83	Icon, clear ×, disabled text.
--global-neutral-grey-1000	#4F4D55	Label, placeholder, helper, units, counter.
--global-neutral-grey-200	#F5F5F5	Disabled ground, lighter than hover.
--global-neutral-grey-500	#E6E6E6	Disabled and read-only border.
--radius-lg	8px	The frame.