PAGE 03 · FORMS

Forms

Inputs, selects, controls, validation. Forms drive the self-assessment, submissions, and certification flows. Stack labels above inputs; align actions right; primary on the right edge of the action row.

01.

Text inputs

Single source: .input. Sizes match button heights.

Input states

Default Filled Hover Focus Disabled With help textUsed for the certificate header. ErrorEnter a valid email address. SuccessLooks good.

Sizes & widths

SM · 32h

MD · 40h

LG · 48h

02.

Textarea

Resizable vertically; min 3 lines.

Textarea

Disclosure summary Markdown supported. Min 50 characters. Notes This field is required.

03.

Selects

Native select for <7 options; a custom listbox is required for searchable / multi.

Select states

Default

With value

Disabled

04.

Checkboxes & radios

Checkboxes for multi-select, radios for one-of-many.

Selection controls

CHECKBOXES

Editorial team

Marketing team

Product team

Research team (disabled)

RADIOS

Disclosure (Grade 0)

Process (Grade 1)

Reasoning (Grade 2)

Verification (Grade 3)

05.

Toggles

For instant on/off settings only — never as a form-submit choice.

Toggle states

OFF

Notify on grade change

Public listing

DISABLED

Beta features

06.

Composition

A worked example — the start of the self-assessment.

Composition · self-assessment block

STEP 02 OF 08 · ENTITY

About your organisation

All fields are required unless marked optional. We use this to produce the certificate header and to anonymise the public benchmark.

Organisation name Type of organisation

Public-facing email Include in the public benchmark dataset (anonymised)