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	The checked state of the checkbox	boolean	false
disabled	disabled	The disabled state of the checkbox	boolean	false
indeterminate	indeterminate	The indeterminate state of the checkbox. Can only be set via JavaScript	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" | "inline-block" | "stacked" | "standalone"	'inline'
name	name	The name of the checkbox	string	undefined
size	size	The size of the checkbox	"md" | "sm"	'md'
value	value	The value of the checkbox	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>>
certaraClick	Standard event emitted when checkbox is clicked	CustomEvent<void>
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