Vuance UI Kit

Inputs

Text field

The foundation of every form: a labelled single-line input with filled and outlined surfaces, leading and trailing slots, helper text, and error states connected to the theme.

We only use it to send the invite

At least 8 characters

Anatomy

Every callout is measured from the live field below, so the lines point at the real elements.

We only use it to send the invite

  1. 1

    Container

    The control surface that carries the variant, border, and the target the user clicks into.

  2. 2

    Label

    Names the field and floats above the value once it is focused or populated.

  3. 3

    Input

    The native input element that holds the value and carries the accessible state.

  4. 4

    Leading icon

    An optional prepend slot for an icon or affordance; the append slot mirrors it on the trailing edge.

  5. 5

    Supporting text

    Helper text below the field, replaced by the error message while the field is invalid.

Variants

Choose a surface treatment from how much separation the field needs from its background.

01 · Default

Filled

A tinted container with a bottom rule that lifts on focus. It groups well in dense, stacked forms.

Use when
Fields sit on a plain surface and you want calm, grouped rows.
Avoid when
The background is already busy or tinted and the container blends into it.
<m-text-field v-model="email" label="Work email" />
02 · High clarity

Outlined

A full outline with a notched label. It keeps each field distinct and reads clearly on layered surfaces.

Use when
Fields sit on cards, imagery, or colored surfaces that need a firm boundary.
Avoid when
A long form would feel heavy with an outline around every row.
<m-text-field v-model="email" variant="outlined" label="Work email" />

Axes

Four independent props shape the field. Each one below is shown on its own, at every value it takes — the playground in Tokens + API crosses them freely.

Variant

variantDefault: filled

The surface: how the field separates from what surrounds it. Choose one per form — two surfaces in one form read as two languages.

Filled Default

A tinted container with a bottom rule. Calm and grouped: the default for dense forms on a plain background.

Outlined

A full border that the raised label cuts a gap into. Keeps each field distinct on cards, imagery and tinted surfaces.

Underline

A single bottom rule, the lowest ink. For inline editing and quiet layouts where a box would be noise.

Label placement

labelPlacementDefault: float

Where the field's name lives. Independent of the variant: every placement works with every surface. Shown empty, so the difference at rest is visible.

Float Default

Rests on the first line and rises once the field is focused or filled. The M3 default; the placeholder waits until the label has risen.

Inset

Always raised — inside the box, or on the border when outlined. The value never shares a line with the name.

Top

A block above the field, always readable. Costs a line of height; the safest choice for long forms and wide prepends.

Hidden

Gone for the eye, still the accessible name. Only when the context names the field, as in a search bar.

Density

densityDefault: default

Vertical scale only: height, padding and the label's raise. Type size never changes, so values line up across densities.

Compact

44rem. Tables, toolbars and filters where rows are tight.

Default Default

56rem, the M3 field height. Right for most forms.

Comfortable

64rem. Touch-first and sparse layouts that want more air.

Rounded

roundedDefault: small

Corner radius from the shape scale, independent of the variant. On outlined, large and pill corners push the content and the notch past the curve; filled keeps a flat bottom and caps pill at large.

Sharp

No radius. For data grids and dense tables.

Small Default

The M3 default for fields.

Medium

Softer, next to medium-rounded cards and buttons.

Large

Pairs with large-rounded containers; the content steps in past the corner.

Pill

Fully rounded ends — search-bar style. The label and the notch start past the curve.

  • Type changes the keyboard, not the value

    `type` picks the mobile keyboard and native hints; the model stays a string. For quantities use MNumberInput — it parses the locale and ignores the scroll wheel.

  • Required

    Sets `required` and `aria-required` on the input. The field draws no asterisk of its own, so say it in the label or the helper text when it matters.

  • Error replaces helper

    The message takes the helper text's place instead of stacking below it, and error wins over focus — the field stays red while it is being fixed.

  • Disabled or read only

    Disabled leaves the tab order and fades the value; read only keeps it focusable and copyable. Use read only for data the user must see but cannot change here.

Leading and trailing slots

Prepend and append slots let the same field hold icons or inline actions. Pick a preset to see where each slot lands and how the label responds to it.

  • Icons stay decorative

    A leading icon supports recognition; the label still carries the accessible name.

  • The label follows the icon

    With a prepend the resting label starts after it. On outlined the raised label returns to the start edge, and the border opens there whatever the slot holds.

  • Keep the target clear

    Trailing actions such as a password reveal need their own accessible name and a hit area of their own.

  • Sized for an icon

    The slots are laid out for a 24rem icon. Wider content fits, but the resting label is placed for an icon — for a wide prepend choose the top label placement.

Properties

Icon slot

Named prepend and append slots

Variant

Surface treatment

Interaction states

Every variant resolves a complete M3 state scheme from static SCSS tokens.

Empty

Rest

The label sits inline as a placeholder until the field is focused or filled.

Value

Populated

A value floats the label above and reveals the input text.

Invalid

Error

The field recolors and swaps helper text for the error message.

Unavailable

Disabled

Interaction is blocked and emphasis drops while the value stays legible for context.

Locked

Read only

The value is presented without allowing edits and remains focusable for copy.