More form components

File upload, character count, password, one-time code, autocomplete and prefixed inputs — all part of the same accessible field system (label + hint + error).

File upload

Upload your ID

A photo or PDF, up to 5MB.

Show code

<DsmuFileUpload
  label="Upload your ID"
  hint="A photo or PDF, up to 5MB."
  accept="image/*,.pdf"
  @change="onFiles"
/>

Character count

A textarea with a live “characters remaining” message announced politely to screen readers.

Character count

Why do you need this?

You have 200 characters remaining

Show code

<DsmuCharacterCount
  v-model="reason"
  label="Why do you need this?"
  :maxlength="200"
/>

Password

Includes a show/hide toggle that reflects its state with aria-pressed.

Password

Show code

<DsmuPasswordInput v-model="password" label="Password" />

One-time code

A single accessible field with autocomplete="one-time-code" — more robust than fragile segmented boxes, and it lets the OS autofill an SMS code.

One-time code

Security code

Sent to your phone by SMS.

Show code

<DsmuCodeInput
  v-model="code"
  label="Security code"
  hint="Sent to your phone by SMS."
  :length="6"
/>

Autocomplete

An accessible combobox (ARIA APG). For the framework-free path with no JavaScript, use a native <select> instead.

Autocomplete

Your town or city

Show code

<DsmuAutocomplete
  v-model="town"
  label="Your town or city"
  :options="['Port Louis', 'Curepipe', 'Quatre Bornes', 'Vacoas', 'Rose Hill']"
/>

Prefix & suffix (currency, units)

Add a prefix or suffix to a Field. The unit is decorative (aria-hidden) — state it in the label or hint too.

Currency input

Amount

In rupees, for example 1500.

Show code

<DsmuField
  v-model="amount"
  label="Amount"
  hint="In rupees, for example 1500."
  prefix="Rs"
  inputmode="numeric"
/>