DSMU Design System for Mauritius

Forms

A field is the whole accessible unit — label, optional hint, optional error, and the control — with the ARIA wiring done for you.

Text input

Default

As it appears on your National Identity Card.

Show code
<DsmuField v-model="name" label="Full name"
  hint="As it appears on your National Identity Card." autocomplete="name" />
Error state

We'll only use this to confirm your request.

Error: Enter an email address in the correct format, like name@example.com

Show code
<DsmuField v-model="email" label="Email address" type="email"
  error="Enter an email address in the correct format, like name@example.com" />

Validation as a system

The full pattern is the validation triad: an error summary at the top of the form (focused after a failed submit, linking to each field), the inline error on each field, and one thing per page.

Error summary + linked fields

Error: Enter your full name

Error: Enter an email address in the correct format

Show code
<DsmuErrorSummary :errors="errors" />

<DsmuField id="summary-name" label="Full name" error="Enter your full name" />
<DsmuField id="summary-email" label="Email address" type="email"
  error="Enter an email address in the correct format" />

Textarea

Textarea

Do not include personal information.

Show code
<DsmuTextarea v-model="message" label="Tell us more"
  hint="Do not include personal information." />

Select

Select
Show code
<DsmuSelect v-model="district" label="District" :options="districts" />

Radios

Radios
How should we contact you?
Show code
<DsmuRadios v-model="contactPref" legend="How should we contact you?"
  :options="[{ value: 'email', label: 'Email' }, { value: 'phone', label: 'Phone' }]" />

Checkboxes

Checkboxes
Which services do you need?
Show code
<DsmuCheckboxes v-model="services" legend="Which services do you need?"
  :options="serviceOptions" />

Date input

Date input
Date of birth

For example, 27 6 1990

Show code
<DsmuDateInput v-model="dob" legend="Date of birth"
  hint="For example, 27 6 1990" />

Accessibility

Every control associates its label (or legend) and links the hint and error via aria-describedby; single controls also set aria-invalid in the error state. Grouped controls (radios, checkboxes, date) use a <fieldset> and <legend>. Errors are always stated in text — never by colour alone.