Employment
Collect employment details, revealing the fields that fit the user's status.
Preview
<fieldset class="govbb-fieldset">
<legend class="govbb-fieldset__legend">
What is your employment status?
</legend>
<div class="govbb-radio-item">
<input
class="govbb-radio"
id="status-studying"
type="radio"
name="status"
value="studying"
/>
<label class="govbb-radio-item__label" for="status-studying"
>Studying</label
>
</div>
<div class="govbb-radio-item">
<input
class="govbb-radio"
id="status-employed"
type="radio"
name="status"
value="employed"
/>
<label class="govbb-radio-item__label" for="status-employed"
>Employed</label
>
</div>
<div class="govbb-radio-item">
<input
class="govbb-radio"
id="status-self-employed"
type="radio"
name="status"
value="self-employed"
/>
<label class="govbb-radio-item__label" for="status-self-employed"
>Self-employed</label
>
</div>
<div class="govbb-radio-item">
<input
class="govbb-radio"
id="status-unemployed"
type="radio"
name="status"
value="unemployed"
/>
<label class="govbb-radio-item__label" for="status-unemployed"
>Unemployed</label
>
</div>
<div class="govbb-radio-item">
<input
class="govbb-radio"
id="status-other"
type="radio"
name="status"
value="other"
/>
<label class="govbb-radio-item__label" for="status-other">Other</label>
</div>
</fieldset>
<div class="govbb-form-group">
<label class="govbb-label" for="employer"
>Name of employer or organisation</label
>
<input class="govbb-input" id="employer" name="employer" type="text" />
</div>
<div class="govbb-form-group">
<label class="govbb-label" for="occupation">Occupation</label>
<span class="govbb-hint" id="occupation-hint">Your job title</span>
<input
class="govbb-input"
id="occupation"
name="occupation"
type="text"
aria-describedby="occupation-hint"
/>
</div>
<div class="govbb-form-group">
<label class="govbb-label" for="salary">Salary</label>
<span class="govbb-hint" id="salary-hint">
Enter the amount in Barbados dollars (BBD)
</span>
<input
class="govbb-input"
id="salary"
name="salary"
type="text"
inputmode="numeric"
aria-describedby="salary-hint"
/>
</div>
<div class="govbb-form-group">
<label class="govbb-label" for="main-tasks">Your main tasks</label>
<span class="govbb-hint" id="main-tasks-hint">
Provide a brief description of what you did in your role
</span>
<textarea
class="govbb-textarea"
id="main-tasks"
name="main-tasks"
rows="4"
aria-describedby="main-tasks-hint"
></textarea>
</div>Ask about the user's employment status first, then reveal the fields that fit their answer. Someone who is unemployed should not be asked for an employer or salary.
When to use this pattern
Use it when a service needs a user's employment details — an application that depends on income, occupation or work history. Ask only for what the service uses to make its decision.
Employment status
Ask "What is your employment status?" as a radio group (Studying, Employed, Self-employed, Unemployed, Other) and use the answer to decide which later fields to show. This keeps the form short for people the extra questions do not apply to.
Dates and duration
Where you need the length of a job, ask for a start date and an end date using the date input component, and offer an "I am currently working here" checkbox that hides the end date. For a running count, the number input component suits a "years of employment" field.
Salary
Say what currency and period you want — for example, the annual amount in
Barbados dollars — so people do not guess. Keep type="text" with
inputmode="numeric" so values are not silently reformatted.
Errors
Validate on the server and show one error message per field that fails, following the form error guidance.