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

Certara UI

Medium

Label Help or instructional text goes here

Toggle dark mode

<certara-switch name="example-1">
  Label
  <span slot="help">Help or instructional text goes here</span>
</certara-switch>

Small

Label Help or instructional text goes here

Toggle dark mode

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

Disabled

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

Toggle dark mode

<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	Description	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

---

HTML

Medium

Label Help or instructional text goes here

Toggle dark mode

<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>

Small

Label Help or instructional text goes here

Toggle dark mode

<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

Disabled

Label Help or instructional text goes here

Disabled checked

Label Help or instructional text goes here

Toggle dark mode

<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>

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/switchInput.scala.html

@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

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