Checkbox

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

Code

Variants

Certara UI

Stacked layout

certara-checkbox is best used inside a certara-form-group.

Label

Help or instructional text goes here Optional help link

Disabled Disabled selected

Toggle dark mode

<certara-checkbox name="example" layout="stacked">Label
  <div slot="help">
    Help or instructional text goes here
    <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>
  </div>
</certara-checkbox>

<certara-checkbox name="example2" layout="stacked" disabled>Disabled</certara-checkbox>

<certara-checkbox name="example3" layout="stacked" disabled checked >Disabled selected</certara-checkbox>

Inline medium

Label Help or instructional text goes here Disabled Disabled selected

Toggle dark mode

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

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

<certara-checkbox name="inline-checkbox-sm" disabled checked>Disabled selected</certara-checkbox>

Inline small

Label Disabled Disabled selected

Toggle dark mode

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

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

<certara-checkbox name="inline-checkbox-sm" size="sm" disabled checked>Disabled selected</certara-checkbox>

certara-checkbox

Properties

Property	Attribute	Description	Type	Default
checked	checked		boolean	false
disabled	disabled		boolean	false
indeterminate	indeterminate		boolean	false
inputType	input-type	Internal prop to make a radio button. Best to use the certara-radio component directly	"checkbox" | "radio"	'checkbox'
layout	layout	Layout options for stacked or inline checkboxes	"inline" | "stacked"	'inline'
name	name		string	undefined
size	size		"md" | "sm"	'md'
value	value		any	'on'

Events

Event	Description	Type
certaraBlur	Standard event emitted when checkbox is blurred	CustomEvent<void>
certaraChange	Standard event emitted when checkbox is toggled	CustomEvent<CheckboxChangeEventDetail<any>>
certaraFocus	Standard event emitted when checkbox is focused	CustomEvent<void>

Slots

Slot	Description
	Content for the label
"error"	Error text that sits below the label
"help"	Help text that sits below the label

Dependencies

Used by

• certara-dropdown-checkbox
• certara-radio

Depends on

• certara-help-block

Graph

graph TD;
  certara-checkbox --> certara-help-block
  certara-dropdown-checkbox --> certara-checkbox
  certara-radio --> certara-checkbox
  style certara-checkbox fill:#f9f,stroke:#333,stroke-width:4px

---

HTML

Stacked layout

Label Help or instructional text goes here Optional help link

Disabled

Disabled selected

Toggle dark mode

<div>
    <div class="form-check">
      <input type="checkbox" name="input-name" id="input-id" class="form-check__input">
      <label class="form-check__label" for="input-id">
        Label
        <span class="help-block">
          <span class="help-block__text">Help or instructional text goes here</span>
          <span class="help-block__link"><a class="link" target="_blank" aria-label="Learn to configure Studies (opens in a new tab)" href="https://help.pinnacle21.net/en/articles/5157972-how-do-i-configure-studies">Optional help link <svg class="icon" aria-hidden="true"><use xlink:href="/assets/svg/regular.svg#arrow-up-right-from-square"></use></svg></a></span>
        </span>
      </label>
    </div>
    <div class="form-check">
      <input disabled type="checkbox" name="input-name" id="input-id-disabled" class="form-check__input">
      <label class="form-check__label" for="input-id-disabled">
        Disabled
      </label>
    </div>
    <div class="form-check">
      <input disabled checked type="checkbox" name="input-name" id="input-id-disabled-selected" class="form-check__input">
      <label class="form-check__label" for="input-id-disabled-selected">
        Disabled selected
      </label>
    </div>
  </div>

Inline medium

Label Help or instructional text goes here

Disabled

Disabled selected

Toggle dark mode

<div>
      <div class="form-check form-check--inline">
        <input type="checkbox" name="input-name" id="input-id1" class="form-check__input">
        <label class="form-check__label" for="input-id1">
          Label
          <span class="help-block">
              <span class="help-block__text">Help or instructional text goes here</span>
          </span>
        </label>
      </div>
      <div class="form-check form-check--inline">
        <input disabled type="checkbox" name="input-name" id="input-id-disabled" class="form-check__input">
        <label class="form-check__label" for="input-id-disabled">
          Disabled
        </label>
      </div>
      <div class="form-check form-check--inline">
        <input disabled checked type="checkbox" name="input-name" id="input-id-disabled-selected" class="form-check__input">
        <label class="form-check__label" for="input-id-disabled-selected">
          Disabled selected
        </label>
      </div>
    </div>

Inline small

Label

Disabled

Disabled selected

Toggle dark mode

<div>
    <div class="form-check form-check--sm form-check--inline">
      <input type="checkbox" name="input-name" id="small-input-id1" class="form-check__input">
      <label class="form-check__label" for="small-input-id1">
        Label
      </label>
    </div>
    <div class="form-check form-check--sm form-check--inline">
      <input disabled type="checkbox" name="input-name" id="input-id-disabled" class="form-check__input">
      <label class="form-check__label" for="input-id-disabled">
        Disabled
      </label>
    </div>
    <div class="form-check form-check--sm form-check--inline">
      <input disabled checked type="checkbox" name="input-name" id="input-id-disabled-selected" class="form-check__input">
      <label class="form-check__label" for="input-id-disabled-selected">
        Disabled selected
      </label>
    </div>
  </div>

Twirl

Symbols prefixed by underscore ("_")

When referencing/naming Symbol with a form input, any argument/option/variable that are endemic to the input itself (i.e. "id", "placeholder", "required") are **not** preceded by an _underscore. In other cases, an _underscore precedes to denote it affects the output of a container/parent element, or a sibling.

app/views/components/formFields/checkboxInput.scala.html

@standardCheckbox(myForm(""),
  Symbol("_label") -> "",
  Symbol("id") -> "",
  Symbol("_inline") -> false,
  Symbol("_help") -> "",
  Symbol("_helpLink") ->
  Symbol("disabled") -> false,
  Symbol("checked") -> false,
  Symbol("class") -> "",
  Symbol("_class") -> "",
)

NameTypeDescriptionDefault valueCopy

1. _label
   string
   Text that describes the control. Will be both visible and clickable.
   blank
   Symbol("_label") -> ""Copy to Clipboard
2. id
   string (required)
   adds an id to the input and a for attribute to the associated label label
   blank
   Symbol("id") -> ""Copy to Clipboard
3. _inline
   boolean
   true invokes the inline visual permutation
   false
   Symbol("_inline") -> ""Copy to Clipboard
4. disabled
   boolean
   Sets the field as to appear disabled, users will not be able to interact with the text field.
   false
   Symbol("disabled") -> ""Copy to Clipboard
5. checked
   boolean
   specifies that the input element should be pre-selected (checked) when the page loads.
   false
   Symbol("checked") -> ""Copy to Clipboard
6. class
   string
   adds class="" to the input
   blank
   Symbol("class") -> ""Copy to Clipboard
7. _class
   string
   adds class="" to the container div (.form-check)
   blank
   Symbol("_class") -> ""Copy to Clipboard
8. _help
   string
   outputs additional help or instructional text
   blank
   Symbol("_help") -> ""Copy to Clipboard
9. _helpLink
   html block (no quotes)
   appends a link to help or instructional text
   blank
   Symbol("_helpLink") -> ""Copy to Clipboard

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