Checkbox

Design guidelines

A checkbox is an input control that allows a user to select one or more options from a number of choices.

Code

HTML

React

Angular

Label Help or instructional text goes here Optional help link

Label

<certara-checkbox name="example" layout="stacked">
  Label
  <span slot="help">
    Help or instructional text goes here
    <certara-link target="_blank" right-icon="arrow-up-right-from-square" href="https://help.pinnacle21.net/en/articles/5157972-how-do-i-configure-studies">
      Optional help link
    </certara-link>
  </span>
</certara-checkbox>
<certara-checkbox name="example" layout="stacked">Label</certara-checkbox>

import { CertaraCheckbox, CertaraLink } from '@certara/certara-ui-react';

<CertaraCheckbox name="example" layout="stacked">
  Label
  <span slot="help">
    Help or instructional text goes here
    <CertaraLink target="_blank" rightIcon="arrow-up-right-from-square" href="https://help.pinnacle21.net/en/articles/5157972-how-do-i-configure-studies">
      Optional help link
    </CertaraLink>
  </span>
</CertaraCheckbox>
<CertaraCheckbox name="example" layout="stacked">Label</CertaraCheckbox>

// In your module (e.g., app.module.ts)
import { CertaraUiAngularModule } from '@certara/certara-ui-angular';

@NgModule({
  imports: [CertaraUiAngularModule]
})

// In your template:
<certara-checkbox name="example" layout="stacked">
  Label
  <span slot="help">
    Help or instructional text goes here
    <certara-link target="_blank" right-icon="arrow-up-right-from-square" href="https://help.pinnacle21.net/en/articles/5157972-how-do-i-configure-studies">
      Optional help link
    </certara-link>
  </span>
</certara-checkbox>
<certara-checkbox name="example" layout="stacked">Label</certara-checkbox>

Label Help or instructional text goes here

Label

import { CertaraCheckbox } from '@certara/certara-ui-react';

<CertaraCheckbox name="inline-checkbox">
  Label
  <span slot="help">Help or instructional text goes here</span>
</CertaraCheckbox>
<CertaraCheckbox name="inline-checkbox">Label</CertaraCheckbox>

// In your module (e.g., app.module.ts)
import { CertaraUiAngularModule } from '@certara/certara-ui-angular';

@NgModule({
  imports: [CertaraUiAngularModule]
})

// In your template:
<certara-checkbox name="inline-checkbox">
  Label
  <span slot="help">Help or instructional text goes here</span>
</certara-checkbox>
<certara-checkbox name="inline-checkbox">Label</certara-checkbox>

Label Help or instructional text goes here

Label

<certara-checkbox name="inline-checkbox" size="sm">
  Label
  <span slot="help">Help or instructional text goes here</span>
</certara-checkbox>
<certara-checkbox name="inline-checkbox" size="sm">Label</certara-checkbox>

import { CertaraCheckbox } from '@certara/certara-ui-react';

<CertaraCheckbox name="inline-checkbox" size="sm">
  Label
  <span slot="help">Help or instructional text goes here</span>
</CertaraCheckbox>
<CertaraCheckbox name="inline-checkbox" size="sm">Label</CertaraCheckbox>

// In your module (e.g., app.module.ts)
import { CertaraUiAngularModule } from '@certara/certara-ui-angular';

@NgModule({
  imports: [CertaraUiAngularModule]
})

// In your template:
<certara-checkbox name="inline-checkbox" size="sm">
  Label
  <span slot="help">Help or instructional text goes here</span>
</certara-checkbox>
<certara-checkbox name="inline-checkbox" size="sm">Label</certara-checkbox>

Checked

// In your module (e.g., app.module.ts)
import { CertaraUiAngularModule } from '@certara/certara-ui-angular';

@NgModule({
  imports: [CertaraUiAngularModule]
})

// In your template:
<certara-checkbox name="checked-checkbox" checked>Checked</certara-checkbox>

Disabled

Checked disabled

import { CertaraCheckbox } from '@certara/certara-ui-react';

<CertaraCheckbox name="disabled-checkbox" disabled>Disabled</CertaraCheckbox>
<CertaraCheckbox name="disabled-checkbox" disabled checked>Checked disabled</CertaraCheckbox>

// In your module (e.g., app.module.ts)
import { CertaraUiAngularModule } from '@certara/certara-ui-angular';

@NgModule({
  imports: [CertaraUiAngularModule]
})

// In your template:
<certara-checkbox name="disabled-checkbox" disabled>Disabled</certara-checkbox>
<certara-checkbox name="disabled-checkbox" disabled checked>Checked disabled</certara-checkbox>

certara-checkbox

Properties

`checked`


Attribute	`checked`
Type	`boolean`
Default	`false`
Required	`false`
Description	The checked state of the checkbox

`disabled`


Attribute	`disabled`
Type	`boolean`
Default	`false`
Required	`false`
Description	The disabled state of the checkbox

`indeterminate`


Attribute	`indeterminate`
Type	`boolean`
Default	`false`
Required	`false`
Description	The indeterminate state of the checkbox. Can only be set via JavaScript

`inputType`


Attribute	`input-type`
Type	`"checkbox" \| "radio"`
Default	`'checkbox'`
Required	`false`
Description	Internal prop to make a radio button. Best to use the certara-radio component directly

`layout`


Attribute	`layout`
Type	`"inline" \| "inline-block" \| "stacked" \| "standalone"`
Default	`'inline'`
Required	`false`
Description	Stacked checkboxes have one per line, inline checkboxes are all on the same line

`name`


Attribute	`name`
Type	`string`
Default	`undefined`
Required	`false`
Description	The name of the checkbox

`size`


Attribute	`size`
Type	`"md" \| "sm"`
Default	`'md'`
Required	`false`
Description	The size of the checkbox

`value`


Attribute	`value`
Type	`any`
Default	`'on'`
Required	`false`
Description	The value of the checkbox

Events

Name	Description	Bubbles
`certaraBlur`	Standard event emitted when checkbox is blurred	`true`
`certaraChange`	Standard event emitted when checkbox is toggled	`false`
`certaraClick`	Standard event emitted when checkbox is clicked	`false`
`certaraFocus`	Standard event emitted when checkbox is focused	`true`

Methods

There are no public methods available for this component

Slots

Name	Description
	Content for the label
`help`	Help text that sits below the label

Design guidelines

Variants

Label Help or instructional text goes here Optional help link

Disabled

Disabled selected

In practice

Checkboxes should:

Work independently from each other. Selecting one checkbox shouldn’t change the selection status of another checkbox in the list. The exception is when a checkbox is used to make a bulk selection of multiple items.
Be framed positively. For example, say “Show file path for uploaded data” instead of “Hide file path for uploaded data”.
Always have a label when used to activate or deactivate a setting.
Be listed according to a logical order, whether it’s alphabetical, numerical, time-based, or some other clear system.
Link to more information or include a subtitle as required to provide more explanation. Don’t rely on tooltips to explain a checkbox.

Content guidelines

Labels

Keep checkbox labels short and descriptive.
Start all checkbox labels with a capital letter.
Don’t include punctuation after checkbox labels.

Accessibility

Keyboard support

Move focus to each checkbox using the tab key (or shift + tab when tabbing backwards).
To interact with the checkbox when it has keyboard focus, press the space key.

Design resources

View component in Figma