Switch

Design guidelines

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

HTML

React

Angular

Label

// In your module (e.g., app.module.ts)
import { CertaraUiAngularModule } from '@certara/certara-ui-angular';

@NgModule({
  imports: [CertaraUiAngularModule]
})

// In your template:
<certara-switch name="example-1">Label</certara-switch>

Label

// In your module (e.g., app.module.ts)
import { CertaraUiAngularModule } from '@certara/certara-ui-angular';

@NgModule({
  imports: [CertaraUiAngularModule]
})

// In your template:
<certara-switch name="example-2" size="sm">Label</certara-switch>

Label (checked)

// In your module (e.g., app.module.ts)
import { CertaraUiAngularModule } from '@certara/certara-ui-angular';

@NgModule({
  imports: [CertaraUiAngularModule]
})

// In your template:
<certara-switch name="example-3" checked>Label (checked)</certara-switch>

Label (disabled)

// In your module (e.g., app.module.ts)
import { CertaraUiAngularModule } from '@certara/certara-ui-angular';

@NgModule({
  imports: [CertaraUiAngularModule]
})

// In your template:
<certara-switch name="example-4" disabled>Label (disabled)</certara-switch>

Label

// In your module (e.g., app.module.ts)
import { CertaraUiAngularModule } from '@certara/certara-ui-angular';

@NgModule({
  imports: [CertaraUiAngularModule]
})

// In your template:
<certara-switch name="example-5" layout="right">Label</certara-switch>

Label Help or instructional text goes here

// In your module (e.g., app.module.ts)
import { CertaraUiAngularModule } from '@certara/certara-ui-angular';

@NgModule({
  imports: [CertaraUiAngularModule]
})

// In your template:
<certara-switch name="example-6">
  Label
  <span slot="help">Help or instructional text goes here</span>
</certara-switch>

Label is hidden

// In your module (e.g., app.module.ts)
import { CertaraUiAngularModule } from '@certara/certara-ui-angular';

@NgModule({
  imports: [CertaraUiAngularModule]
})

// In your template:
<certara-switch name="example-7" hide-label>Label is hidden</certara-switch>

certara-switch

Properties

`checked`


Attribute	`checked`
Type	`boolean`
Default	`false`
Required	`false`
Description	Whether the switch is in the “on” state.

`disabled`


Attribute	`disabled`
Type	`boolean`
Default	`false`
Required	`false`
Description	Whether the switch is disabled and non-interactive.

`hideLabel`


Attribute	`hide-label`
Type	`boolean`
Default	`false`
Required	`false`
Description	Visually hides the label while keeping it accessible to screen readers.

`layout`


Attribute	`layout`
Type	`"right"`
Default	`undefined`
Required	`false`
Description	Controls the layout of the switch relative to its label.

`name`


Attribute	`name`
Type	`string`
Default	`this.inputId`
Required	`false`
Description	The name attribute for the underlying input element. Defaults to a unique auto-generated ID.

`size`


Attribute	`size`
Type	`"default" \| "sm"`
Default	`'default'`
Required	`false`
Description	The size variant of the switch.

`value`


Attribute	`value`
Type	`any`
Default	`'on'`
Required	`false`
Description	The value submitted with form data when checked.

Events

Name	Description	Bubbles
`certaraBlur`	Emitted when the switch loses focus.	`true`
`certaraChange`	Emitted when the switch state changes. Event detail contains `checked` (boolean) and `value` properties.	`false`
`certaraFocus`	Emitted when the switch receives focus.	`true`

Methods

There are no public methods available for this component

Slots

Name	Description
	Default slot for the label text
`help`	Optional help text displayed below the label. Supports interactive elements like links.

Design guidelines

Label Help or instructional text goes here

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