Switches

Similar to Checkboxes, you can use Switches to indicate or control boolean values. They are usually used to turn a specific setting on or off.

Code

Label Help or instructional text goes here

Label (disabled) Help or instructional text goes here

Label (disabled + checked) Help or instructional text goes here

<certara-switch name="example-3" disabled>
  Label (disabled)
  <span slot="help">Help or instructional text goes here</span>
</certara-switch>
<certara-switch name="example-4" disabled checked>
  Label (disabled + checked)
  <span slot="help">Help or instructional text goes here</span>
</certara-switch>

certara-switch

Properties

Property	Attribute	Type	Default
`checked`	`checked`	`boolean`	`false`
`disabled`	`disabled`	`boolean`	`false`
`hideLabel`	`hide-label`	`boolean`	`false`
`name`	`name`	`string`	`this.inputId`
`size`	`size`	`"default" \| "sm"`	`'default'`
`value`	`value`	`any`	`'on'`

Events

Event	Description	Type
`certaraBlur`		`CustomEvent<void>`
`certaraChange`		`CustomEvent<CheckboxChangeEventDetail<any>>`
`certaraFocus`		`CustomEvent<void>`

Dependencies

Depends on

certara-help-block

Graph

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

Label Help or instructional text goes here

<div class="form-switch">
    <label class="form-switch__label" for="input-id">
      Label
      <span class="help-block">
        <span class="help-block__text">
          Help or instructional text goes here
        </span>
      </span>
    </label>
    <input type="checkbox" id="input-id" class="form-switch__input">
  </div>

Label Help or instructional text goes here

<div class="form-switch form-switch--sm">
    <label class="form-switch__label" for="input-id">
      Label
      <span class="help-block">
        <span class="help-block__text">
          Help or instructional text goes here
        </span>
      </span>
    </label>
    <input type="checkbox" id="input-id" class="form-switch__input">
  </div>

Disabled

Label Help or instructional text goes here

Disabled checked

Label Help or instructional text goes here

<div>
    <h3 class="text-base">Disabled</h3>
    <div class="form-switch">
      <label class="form-switch__label" for="input-id">
        Label
        <span class="help-block">
          <span class="help-block__text">
            Help or instructional text goes here
          </span>
        </span>
      </label>
      <input disabled type="checkbox" id="input-id" class="form-switch__input">
    </div>
    <h3 class="text-base mt-8">Disabled checked</h3>
    <div class="form-switch">
      <label class="form-switch__label" for="input-id">
        Label
        <span class="help-block">
          <span class="help-block__text">
            Help or instructional text goes here
          </span>
        </span>
      </label>
      <input checked disabled type="checkbox" id="input-id" class="form-switch__input">
    </div>
  </div>

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.

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

NameTypeDescriptionDefault valueCopy

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

Accessibility

Structure

Screen readers convey information about text fields automatically through native HTML.

To disable, add the HTML disabled attribute to the text field.
To set as read-only, add the HTML readonly attribute to the text field.
Provide a unique id attribute value for the text field and use the for attribute to connect the label with the text field. This allows screen readers to convey the purpose of the text field.

Labeling

Make sure all fields have a visible label and the label is associated properly to the field for accessibility.
Avoid using placeholder text whenever possible. It can pose a range of accessibility problems, like:
- Low color contrast, making the text hard to read
- Inconsistent behavior between browsers and screen readers
- Text disappearing when the user starts typing, which can be confusing to people with cognitive impairments
- Limited space available for additional context, due to field size
Make sure any critical information is communicated either in the field label or using helper text. Search fields or brief examples are the only exceptions where placeholder text is OK.

Keyboard support

Text fields have standard keyboard support.
Customers who rely on the keyboard expect to move focus to each text field using the tab key (or shift + tab when tabbing backwards).
If the type is set to number, then customers can use the up and down arrow keys to adjust the value typed into the field when hovering over or focusing the field to make the arrows appear.
Using the disabled attribute will prevent the text field from receive keyboard focus or inputs.
The readOnly attribute allows focus on the text field but prevents input or editing.

Design resources

View component in Figma