Checkbox

Show design guidelines

Code

Framework HTML React Angular

Stacked layout

Label Help or instructional text goes here Optional help link

Toggle dark mode

<certara-checkbox name="example" layout="stacked">
  Label
  <span slot="help">
    <span class="help-block__text">Help or instructional text goes here</span>
    <certara-link target="_blank" 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>

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

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

Inline medium

Label Help or instructional text goes here

Toggle dark mode

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

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

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

Inline small

Label

Toggle dark mode

<certara-checkbox name="inline-checkbox" size="sm">Label</certara-checkbox>

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

<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</certara-checkbox>

Checked

Checked

Toggle dark mode

<certara-checkbox name="checked-checkbox" checked>Checked</certara-checkbox>

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

<CertaraCheckbox name="checked-checkbox" checked>Checked</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="checked-checkbox" checked>Checked</certara-checkbox>

Disabled

Disabled

Toggle dark mode

<certara-checkbox name="disabled-checkbox" disabled>Disabled</certara-checkbox>

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

<CertaraCheckbox name="disabled-checkbox" disabled>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

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	Layout options for stacked or inline checkboxes

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	true
certaraClick	Standard event emitted when checkbox is clicked	true
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
error	Error text that sits below the label
help	Help text that sits below the label