Skip to content
WeDanceDocs
Componentsbeta

Input

Single-line text field. White surface, soft brown border, rounded-xl and a red focus halo — the look the profile, onboarding and booking forms already use.

Example

Always inside a Field so it has a visible label.

Shown on your public profile.

Value: —

vue
<Field label="Your name">
  <Input v-model="name" placeholder="e.g. Ana Pérez" autocomplete="name" />
</Field>

States

Focus is the only state with a halo. Invalid keeps the red border while focused, with a red halo.

Enter a valid email address.
vue
<Input placeholder="Default" />
<Input model-value="Munich" />
<Input disabled model-value="Can't edit this" />
<Input invalid model-value="ana@" />

Sizes

Two heights cover the product: 44px for forms (and touch), 36px for dense UI.

vue
<Input placeholder="Default — h-11, rounded-xl" />
<Input size="sm" placeholder="Small — h-9, rounded-lg" />

Input types

Use the right type and autocomplete — phones show the matching keyboard and browsers can autofill.

vue
<Input type="email" autocomplete="email" inputmode="email" />
<Input type="url" placeholder="yoursite.com" />
<Input type="date" />
<Input type="number" min="1" />

Props

PropTypeDefaultDescription
v-modelstring | number—The value. Number inputs still emit a string — parse it where you use it.
typestring'text'Any native input type: text, email, url, tel, number, date, time, password, search.
size'default' | 'sm''default'default = h-11 (forms people fill in). sm = h-9 (filters, admin tables, toolbars).
invalidbooleanfalseRed border + aria-invalid without a Field. Inside a Field, pass error to the Field instead.
classstring—Extra classes, merged with tailwind-merge.
…attrsHTML attrs—Everything else (placeholder, autocomplete, disabled, required, name, id, aria-*) goes to the <input>.

Do & don't

Do — Label above, placeholder shows an example of the format.

Don't — Use the placeholder as the label — it disappears as soon as someone types.

Do — Size the field to the expected answer on wide screens.

Don't — Set inline border or background colours — the component owns them, and the invalid state can't override inline styles cleanly.

Accessibility

  • Every input needs a visible label. Wrap it in Field, which sets for/id for you.
  • Inside a Field the input gets aria-describedby (error, then hint) and aria-invalid automatically.
  • Default height is 44px — the minimum comfortable touch target.
  • Focus adds a 3px halo around the field, so it reads as a shape change, not only a colour change.
  • Set autocomplete on personal-data fields (name, email, tel) so browsers and password managers can fill them.