Forms

Try it

Turn each piece on and off, and swap the control underneath.

<WildFormField
  label="Threshold"
  help="Alerts fire when a reading crosses this."
>
  <WildTextInput v-model="threshold" />
</WildFormField>

When to use

Anatomy

A label and optional hint, the control, then help text or an error.

<WildFormField label="Threshold" hint="Optional"
  help="Alerts fire when a reading crosses this.">
  <WildTextInput v-model="threshold" />
</WildFormField>

States

The error takes the help text’s place, so a field with help keeps its height when validation fires.

Controls

Content

Props

Tokens

Try it

Type in it. Past 90% of the limit, the counter turns amber.

<WildTextareaBase
  v-model="notes"
  size="sm"
  :max-length="120"
/>

When to use

Sizes

sm is 140px tall with 12px text; lg is 200px with 13px. Both resize vertically only.

States

Accessibility

It’s a native textarea, so typing and selection work as usual. Give it a name with ariaLabel. Error sets aria-invalid, and the counter is announced politely as it changes.

Props

Tokens

Try it

Open it, arrow through it and choose. The decommissioned bore can’t be picked.

<WildSelect
  v-model="site"
  :options="sites"
  placeholder="Choose a site"
  size="sm"
/>

When to use

Anatomy

A trigger that shows the choice and a chevron, and a list that opens beneath it.

<WildSelect v-model="site" placeholder="Choose a site" />
<WildSelect v-model="site" :options="sites" size="lg" />

States

Sizes

Two, matching the input: 36 and 44px.

Accessibility

Screen readers hear a combobox, collapsed or expanded. Focus stays on it while the arrows move through the list, and each option is announced as you reach it.

Props

Tokens

Try it

Press the steppers, or tab to one and press Enter.

<WildTextInput
  v-model="threshold"
  size="lg"
  type="quantity"
/>

When to use

Anatomy

A 44px field with a decrease and an increase stepper inside the frame.

<WildTextInput v-model="threshold" type="quantity" size="lg" />

States

The same five states as the text input.

Accessibility

The steppers are buttons named Decrease and Increase. When the field is disabled, so are they.

Props

Tokens

Try it

Open the country list and choose. The flag and dialling code change together, and the number field doesn’t move.

+64

21 555 0134

Country

NZAUGBUS

Content

filledempty

Error

Disabled

const phone = ref('+64215550134')

<WildPhoneInput
  v-model="phone"
  placeholder="412 345 678"
/>

Copy

When to use

Anatomy

A country selector and a number field, sharing one row and one frame style.

+1

202 555 0134

+64

21 555 0134

+966

55 555 0134

Show codeCopy

<WildPhoneInput v-model="phone" />

Country list

Nine countries in alphabetical order, with no search.

+64

412 345 678

+54 Argentina

+61 Australia

+880 Bangladesh

+52 Mexico

+264 Namibia

+64 New Zealand

+966 Saudi Arabia

+44 United Kingdom

+1 United States

States

Only the half you’re using changes.

rest

+64

21 555 0134

hover

+64

21 555 0134

focus

+64

21 555 0134

open

+64

21 555 0134

error

+64

21 555 0134

disabled

+64

21 555 0134

Accessibility

The selector is a combobox named Country calling code, and each country is announced as the arrows reach it. An error is announced as soon as it appears.

Props

Tokens

Try it

Press the eye to show the password, or tab to it and press Enter.

<WildPasswordInput
  v-model="password"
  size="lg"
/>

When to use

Anatomy

The input, with a show-and-hide toggle inside the frame.

<WildPasswordInput v-model="password" />
<WildPasswordInput v-model="password" :revealed="true" />

States

The same five states as the text input.

Errors

Pass the message as error. The field shows it underneath, so it works outside a Form field.

Accessibility

The eye is a toggle button named Show password, and screen readers hear whether it’s pressed. It’s disabled with the field.

Props

Tokens

Try it

Type a code, step back with Backspace, move with the arrow keys, or paste six digits.

<WildVerificationCodeInput
  v-model="code"
/>

When to use

States

Six boxes that behave as one field.

<WildVerificationCodeInput v-model="code" />

Content

Accessibility

Each box is its own input, named “Digit 1 of 6” and so on, inside one group. The error message is announced when it appears.

Props

Tokens

Try it

Remove a chip with its ×, or tab to the × and press Enter. Turn on Suggestions to see the match list.

<WildChipInput
  v-model="recipients"
  size="md"
  placeholder="Add people by email"
/>

When to use

Anatomy

Chips for what’s been added, then the text being typed. Each chip carries its own state and a × in its own colour, which fills a circle on hover.

<WildChipInput v-model="recipients"
  placeholder="Add people by email" />

Chip states

Four states show how far an address has got: typed, recognised as an existing user, rejected, or already sent.

Field states

Suggestions

Accessibility

Each × is a button named after its chip, such as “Remove sam@orchard.nz”, so a screen reader can tell them apart.

Props

Tokens

Try it

Click the label or the box, or tab to it and press Space.

<WildCheckbox
  v-model="checked"
  size="md"
  label="Send alerts"
  sub="Every reading outside the threshold" />

When to use

Anatomy

A box, a tick, and an optional label with a sub-line. The label and sub-line are part of the target.

<WildCheckbox v-model="checked" label="Send alerts" />
<WildCheckbox
  v-model="checked"
  label="Send alerts"
  sub="Every reading outside the threshold" />

Sizes

Two sizes, 16px and 14px. The default is md.

States

Off, on and indeterminate, against each interaction state.

Accessibility

A screen reader hears the label, then checked, not checked or mixed. A checkbox with no visible label needs ariaLabel.

Props

Tokens

Try it

Click an option, or tab to one and press Space. For arrow keys between options, use Radio group.

<WildRadioGroup v-model="mode">
  <WildRadio
    value="all"
    size="sm"
    label="Every reading"
    sub="Every sample the logger sends" />
  <WildRadio
    value="threshold"
    size="sm"
    label="Only outside the threshold"
    sub="Roughly 40 a week for this site" />
  <WildRadio
    value="never"
    size="sm"
    label="Never"
    sub="Alerts stay in the dashboard only" />
</WildRadioGroup>

When to use

Anatomy

A ring, a dot, and an optional label with a sub-line. The label and sub-line are part of the target.

<WildRadioGroup v-model="mode">
  <WildRadio value="all" label="Every reading" />
  <WildRadio value="threshold" label="Only outside the threshold"
    sub="Roughly 40 a week for this site" />
</WildRadioGroup>

Sizes

Two sizes: 18px with a 6px dot, and 24px with a 10px dot. The default is sm.

States

Content

Accessibility

A screen reader hears the label, then selected or not selected. A radio with no visible label needs ariaLabel.

Props

Tokens

Try it

Click it, or tab to it and press Space or Enter.

<WildToggle
  v-model="enabled"
  size="md"
  label="Send SMS alerts"
/>

When to use

Anatomy

A track and a knob, with an optional label to the right. The label is part of the target.

<WildToggle v-model="enabled" label="Send SMS alerts" />

Sizes

Two sizes, each with 2px between the knob and the track. The default is md.

States

Accessibility

A screen reader hears the label, then on or off. A toggle with no visible label needs ariaLabel.

Props

Tokens

Try it

Type into it, then clear it with the ×. Clearing puts focus back in the field.

<WildSearchBar
  v-model="query"
  size="md"
  placeholder="Search sites"
/>

When to use

Anatomy

A magnifier, the text field and a clear button, in one frame.

<WildSearchBar v-model="query"
  placeholder="Search sites" />

Sizes

Three heights: 36, 40 and 44px. The default is md.

States

The frame is the text input’s, so a search bar and a text field focus the same way on one form.

Accessibility

The field is named by ariaLabel, or by its placeholder when there’s none. The clear button is named “Clear search”.

Props

Tokens

Try it

Drag the handle, or tab to it and use the arrow keys, Home or End.

<WildSlider
  v-model="threshold"
  label="Refill threshold"
  :min="0"
  :max="100"
  :step="1"
  size="md"
  color="blue"
  show-value
  :format-value="(n) => `${n}%`"
/>

When to use

Anatomy

A label and an optional value badge, the track and its fill, and the handle. With ticks on, the min and max sit underneath.

<WildSlider v-model="v" />
<WildSlider v-model="v" label="Refill threshold" show-value />
<WildSlider v-model="v" label="Refill threshold" show-value show-ticks :step="10" />

Sizes

Tracks of 4, 6 and 8px, with 16, 20 and 24px handles. The default is md.

<WildSlider v-model="v" size="sm" />
<WildSlider v-model="v" size="md" />
<WildSlider v-model="v" size="lg" />

Ticks

Up to 11 marks, each on a value the handle can stop on. Ticks bring the min and max labels with them.

<WildSlider v-model="v" :min="0" :max="100" :step="10" show-ticks />
<WildSlider v-model="v" :min="1" :max="10" :step="1" show-ticks />

Colour

Five fills. Each one colours the handle’s ring and its focus ring too.

States

Hover and focus lift the handle, and focus adds a ring. Disabled greys the fill but keeps the value readable.

<WildSlider v-model="v" label="Normal" show-value />
<WildSlider v-model="v" label="Locked setting" show-value disabled />

Accessibility

It’s a native range input, named by label or ariaLabel, and it announces the formatted value. The pointer target is 24px tall at every size.

Props

Tokens

Try it

Click the field, or focus it and press Enter, to open the calendar. Turn on Min / max to limit it to 30 days.

<WildDatePicker
  v-model="date"
  size="sm"
/>

When to use

Anatomy

A trigger and a panel. The trigger uses the text input’s frame, and the panel is the calendar.

Sizes

Two heights, 36 and 44px, the same as the text input. The default is sm.

States

Accessibility

Opening the calendar moves focus to the chosen day, or to today. Closing it returns focus to the field.

Props

Tokens

Try it

Click a day, or tab into the grid and use the arrow keys. The arrows carry on into the next month.

<WildCalendar
  v-model="date"
/>

When to use

Anatomy

Three bands on a 340px surface. Every month shows six weeks, so the calendar never changes height.

Day states

Accessibility

The grid is one tab stop, on the chosen day or today. The month label is announced each time it changes.

Props

Tokens

Try it

Start on 31 January, jump to April, then back. Compare the two overflow rules.

<WMonthDayPicker
  value={repeatsOn}
  onChange={setRepeatsOn}
  year={2026}
  overflow="clamp"
  size="sm"
  ariaLabel="Repeats on"
/>

When to use

Overflow

When a month is shorter than the chosen day, clamp moves the day to the month’s last day. hold keeps the stored day, shows the last day, and notes the held day beside the field.

<WMonthDayPicker value={repeatsOn} onChange={setRepeatsOn} overflow="clamp" />
<WMonthDayPicker value={repeatsOn} onChange={setRepeatsOn} overflow="hold" />

Sizes and states

Two heights, 36 and 44px, to match the other fields. Error and disabled always apply to both selects.

<WFormRow label="Repeats on" help="Every year, on this date.">
  <WMonthDayPicker value={repeatsOn} onChange={setRepeatsOn} width="100%" ariaLabel="Repeats on" />
</WFormRow>

Accessibility

The selects are announced as Month and Day. Pass ariaLabel to name the pair, usually with the form row’s label. A held day is announced as it appears.

Props

Tokens

Try it

Drop files on it, click it, or add the samples. The site survey fails once, so you can retry it.

<WFileDrop
  items={files}
  label="Evidence"
  hint="Optional"
  accept="image/*,.pdf,.csv"
  formats={['PDF', 'CSV', 'JPG', 'PNG']}
  maxSize={10 * 1024 * 1024}
  onAdd={upload}
  onRetry={upload}
  onCancel={cancel}
  onRemove={remove}
  onClear={clearAll}
/>

When to use

Anatomy

The drop zone, then the file list: a summary header with Clear all, and one row per file.

Drag states

Compact

One row in place of the full zone. It keeps the drag states, paste and the list.

Content

Accessibility

The zone is a button named by its label and title, described by its formats and any error, and it announces each drag message. Row actions name their file, such as “Retry site-survey-bore-12.pdf”.

Props

Tokens

Try it

Click the name and type. Enter finishes, Escape puts the old name back.

<WildInlineEditTitle
  v-model="alarm.name"
  size="md"
  placeholder="Untitled alarm"
  @submit="save"
/>

When to use

Sizes

Match the heading it replaces. The default is md.

<WildInlineEditTitle v-model="name" size="sm" />
<WildInlineEditTitle v-model="name" size="md" />
<WildInlineEditTitle v-model="name" size="lg" />

States

It reads as a heading until it’s touched. Hover lays a grey ground, and focus draws the field’s blue edge.

Content

Accessibility

A title has no visible label, so give it aria-label. Without one, screen readers fall back to the placeholder.

Props

Tokens

Try it

Tab to the group, then use the arrow keys to change the choice.

<WRadioGroup
  value={reportEvery}
  onChange={setReportEvery}
  label="Report readings"
  hint="Applies to 12 loggers"
  help="Shorter intervals use more battery."
  size="sm"
  options={[
    { id: '5m', label: 'Every 5 minutes', sub: '288 readings a day' },
    { id: '15m', label: 'Every 15 minutes', sub: '96 readings a day' },
    { id: '1h', label: 'Hourly', sub: '24 readings a day' },
    { id: '1d', label: 'Daily', sub: 'One reading a day' },
  ]}
/>

When to use

Anatomy

A label above, an optional hint on the right, the options, then help or an error below.

Layouts

Stack options that are sentences. Use a row only for three or four short words.

Option cards

When each choice needs a line of explanation, make the option a card.

States

Accessibility

The group is one tab stop, and a screen reader hears its label as focus enters. An error is announced when it appears. Give a group with no visible label an ariaLabel.

Props

Tokens

Try it

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

<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

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.

Types

Four content shapes, each with a plain model.

Icon, clear and counter

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

Sizes

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

States

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.

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

Content

Accessibility

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

Props

Tokens

Try it

Type “pu” and press Enter, then try “ohau”, the arrow keys and Escape.

<WildInputAutoComplete
  v-model="query"
  :options="sites"
  label="Site or logger"
  hint="16 on this account"
  placeholder="Search sites and loggers"
  help="Choose where this alarm watches."
  size="sm"
  :max-results="6"
  clearable
  @select="watch"
>
  <template #leading>
    <MagnifyingGlassIcon />
  </template>
</WildInputAutoComplete>

When to use

Anatomy

The text input’s frame, with a list 4px below. Rows hold a name, optional icon and sub-line, and a tick on the choice.

Matching

Case, extra spaces and macrons are ignored. Start-of-name matches rank first, then start-of-word, then anywhere.

Rows

Add an avatar and sub-line when names alone could be confused.

label only · 34px

Kiwifruit — Gold

Kiwifruit — Green

Kiwifruit — Red

Kiwiberry

avatar and sub-line · 44px

Ana Tupouana@emupark.co.nz

Ben HartleyReseller · Hartley Irrigation

Grace Liugrace@emupark.co.nz

Hemi ParataOn call this week · SMS

Showing 4 of 6. Keep typing to narrow.

Free text

With allow-custom, the typed text is the last row. Enter still takes the first match.

matches, then your text

Grace Liugrace@emupark.co.nz

Add “gr”

only your text

Add “sam@emupark.co.nz”

States