---
id: checkbox
title: Checkbox
---

# Checkbox

## How to use

<code src="@digigov/ui/src/form/Checkbox/__stories__/Default.tsx" />

### For multiple questions

If you’re asking more than one question on the page, you can display the question's title using `<FieldsetLegend size="sm">`.

<code src="@digigov/ui/src/form/Checkbox/__stories__/MultipleQuestions.tsx" />

### Checkbox items with hints

You can add hints to checkbox items to provide additional information about the options.

<code src="@digigov/ui/src/form/Checkbox/__stories__/WithHint.tsx" />

### Add an option for ‘none’

When ‘none’ would be a valid answer, give users the option to check a box to say none of the other options apply to them — without this option, users would have to leave all of the boxes unchecked. Giving users this option also makes sure they do not skip the question by accident.

<code src="@digigov/ui/src/form/Checkbox/__stories__/NoneAnswer.tsx" />

If JavaScript is unavailable, and a user selects both the ‘none’ checkbox and another checkbox, display an error message.

<code src="@digigov/ui/src/form/Checkbox/__stories__/NoneAnswerWithError.tsx" />

### Error messages

Error messages should be styled like this:

<code src="@digigov/ui/src/form/Checkbox/__stories__/WithErrorMessage.tsx" />

### Conditionally revealing a related question

You can ask the user a related question when they select a particular checkbox, so they only see the question when it’s relevant to them.

This might make 2 related questions easier to answer by grouping them on the same page. For example, you could reveal a phone number input when the user selects the ‘Contact me by phone’ option.

<code src="@digigov/ui/src/form/Checkbox/__stories__/ConditionalReveal.tsx" />

## Accessibility

You can read more about the accessibility patterns used in our Checkbox
implementation in the ARIA Authoring Practices Guide (APG) at [Checkbox](https://www.w3.org/WAI/ARIA/apg/patterns/checkbox/) section.

## API

See below for a complete reference to all of the props  available to the components mentioned here.

<ComponentProps componentName={["Checkbox","CheckboxItem"]} />