Checkboxes

These examples are used for automated tests and may not follow service manual best practice.

Checkboxes default

Open this example in a new tab: Checkboxes default

How do you want to be contacted about this?

Select all options that are relevant to you

Phone

Text message

Checkboxes with conditional content

Open this example in a new tab: Checkboxes with conditional content

How do you want to be contacted about this?

Select all options that are relevant to you

Email address

Phone

Phone number

Text message

Mobile phone number

Checkboxes with conditional content, error message

Open this example in a new tab: Checkboxes with conditional content, error message

How do you want to be contacted about this?

Select all options that are relevant to you

Select how you like to be contacted

Email address

Phone

Phone number

Text message

Mobile phone number

Checkboxes with conditional content, error message (nested)

Open this example in a new tab: Checkboxes with conditional content, error message (nested)

How do you want to be contacted about this?

Select all options that are relevant to you

Email address

Phone

Phone number Enter your phone number

Text message

Mobile phone number

Checkboxes with disabled item

Open this example in a new tab: Checkboxes with disabled item

Red

Green

Blue

Checkboxes with error message

Open this example in a new tab: Checkboxes with error message

How do you want to be contacted about this?

Select how you want to be contacted

Phone

Text message

Checkboxes with hint

Open this example in a new tab: Checkboxes with hint

What is your nationality?

If you have dual nationality, select all options that are relevant to you

British

Irish

Citizen of another country

Checkboxes with hint and error

Open this example in a new tab: Checkboxes with hint and error

How do you want to be contacted about this?

Select all options that are relevant to you

Select how you want to be contacted

Phone

Text message

Checkboxes with hints on items

Open this example in a new tab: Checkboxes with hints on items

What is your nationality?

If you have dual nationality, select all options that are relevant to you

British

including English, Scottish, Welsh and Northern Irish

Irish

Citizen of another country

Checkboxes with legend size S

Open this example in a new tab: Checkboxes with legend size S

How do you want to be contacted about this?

Select all options that are relevant to you

Phone

Text message

Checkboxes with legend size M

Open this example in a new tab: Checkboxes with legend size M

How do you want to be contacted about this?

Select all options that are relevant to you

Phone

Text message

Checkboxes with legend size L

Open this example in a new tab: Checkboxes with legend size L

How do you want to be contacted about this?

Select all options that are relevant to you

Phone

Text message

Checkboxes with legend size XL

Open this example in a new tab: Checkboxes with legend size XL

How do you want to be contacted about this?

Select all options that are relevant to you

Phone

Text message

Checkboxes with long text

Open this example in a new tab: Checkboxes with long text

Venenatis Condimentum

Nullam id dolor id nibh ultricies vehicula ut id elit. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Maecenas faucibus mollis interdum. Donec id elit non mi porta gravida at eget metus.

Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Donec sed odio dui. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras mattis consectetur purus sit amet fermentum.

Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Etiam porta sem malesuada magna mollis euismod. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. Sed posuere consectetur est at lobortis.

Checkboxes with "none of the above" option

Open this example in a new tab: Checkboxes with "none of the above" option

How do you want to be contacted about this?

Email address

Phone

Phone number

Text message

Mobile phone number

None of the above

Checkboxes without page heading

Open this example in a new tab: Checkboxes without page heading

How do you want to be contacted about this?

Select all options that are relevant to you

Phone

Text message

Checkboxes with pre-checked values

Open this example in a new tab: Checkboxes with pre-checked values

What is your nationality?

British

Irish

Citizen of another country

Checkboxes small

Open this example in a new tab: Checkboxes small

How do you want to be contacted about this?

Select all options that are relevant to you

Phone

Text message

Checkboxes small with conditional content

Open this example in a new tab: Checkboxes small with conditional content

How do you want to be contacted about this?

Select all options that are relevant to you

Email address

Phone

Phone number

Text message

Mobile phone number

Checkboxes small with conditional content, error message

Open this example in a new tab: Checkboxes small with conditional content, error message

How do you want to be contacted about this?

Select all options that are relevant to you

Select how you like to be contacted

Email address

Phone

Phone number

Text message

Mobile phone number

Checkboxes small with conditional content, error message (nested)

Open this example in a new tab: Checkboxes small with conditional content, error message (nested)

How do you want to be contacted about this?

Select all options that are relevant to you

Email address

Phone

Phone number Enter your phone number

Text message

Mobile phone number

Checkboxes small with disabled item

Open this example in a new tab: Checkboxes small with disabled item

Red

Green

Blue

Checkboxes small with error message

Open this example in a new tab: Checkboxes small with error message

How do you want to be contacted about this?

Select how you want to be contacted

Phone

Text message

Checkboxes small with hint

Open this example in a new tab: Checkboxes small with hint

What is your nationality?

If you have dual nationality, select all options that are relevant to you

British

Irish

Citizen of another country

Checkboxes small with hint and error

Open this example in a new tab: Checkboxes small with hint and error

How do you want to be contacted about this?

Select all options that are relevant to you

Select how you want to be contacted

Phone

Text message

Checkboxes small with hints on items

Open this example in a new tab: Checkboxes small with hints on items

What is your nationality?

If you have dual nationality, select all options that are relevant to you

British

including English, Scottish, Welsh and Northern Irish

Irish

Citizen of another country

Checkboxes small with long text

Open this example in a new tab: Checkboxes small with long text

Venenatis Condimentum

Checkboxes small with "none of the above" option

Open this example in a new tab: Checkboxes small with "none of the above" option

How do you want to be contacted about this?

Email address

Phone

Phone number

Text message

Mobile phone number

None of the above

Checkboxes small without page heading

Open this example in a new tab: Checkboxes small without page heading

How do you want to be contacted about this?

Select all options that are relevant to you

Phone

Text message

Checkboxes small with pre-checked values

Open this example in a new tab: Checkboxes small with pre-checked values

What is your nationality?

British

Irish

Citizen of another country

This is an internal development app.

Checkboxes

Checkboxes default

How do you want to be contacted about this?

Checkboxes with conditional content

How do you want to be contacted about this?

Checkboxes with conditional content, error message

How do you want to be contacted about this?

Checkboxes with conditional content, error message (nested)

How do you want to be contacted about this?

Checkboxes with disabled item

Checkboxes with error message

How do you want to be contacted about this?

Checkboxes with hint

What is your nationality?

Checkboxes with hint and error

How do you want to be contacted about this?

Checkboxes with hints on items

What is your nationality?

Checkboxes with legend size S

How do you want to be contacted about this?

Checkboxes with legend size M

How do you want to be contacted about this?

Checkboxes with legend size L

How do you want to be contacted about this?

Checkboxes with legend size XL

How do you want to be contacted about this?

Checkboxes with long text

Venenatis Condimentum

Checkboxes with "none of the above" option

How do you want to be contacted about this?

Checkboxes without page heading

Checkboxes with pre-checked values

What is your nationality?

Checkboxes small

How do you want to be contacted about this?

Checkboxes small with conditional content

How do you want to be contacted about this?

Checkboxes small with conditional content, error message

How do you want to be contacted about this?

Checkboxes small with conditional content, error message (nested)

How do you want to be contacted about this?

Checkboxes small with disabled item

Checkboxes small with error message

How do you want to be contacted about this?

Checkboxes small with hint

What is your nationality?

Checkboxes small with hint and error

How do you want to be contacted about this?

Checkboxes small with hints on items

What is your nationality?

Checkboxes small with long text

Venenatis Condimentum

Checkboxes small with "none of the above" option

How do you want to be contacted about this?

Checkboxes small without page heading

Checkboxes small with pre-checked values

What is your nationality?