Switch

Show 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

Framework HTML React Angular

Default

Label

Toggle dark mode

<certara-switch name="example-1">Label</certara-switch>

import { CertaraSwitch } from '@certara/certara-ui-react';

<CertaraSwitch name="example-1">Label</CertaraSwitch>

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

Small

Label

Toggle dark mode

<certara-switch name="example-2" size="sm">Label</certara-switch>

import { CertaraSwitch } from '@certara/certara-ui-react';

<CertaraSwitch name="example-2" size="sm">Label</CertaraSwitch>

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

Checked

Label (checked)

Toggle dark mode

<certara-switch name="example-3" checked>Label (checked)</certara-switch>

import { CertaraSwitch } from '@certara/certara-ui-react';

<CertaraSwitch name="example-3" checked>Label (checked)</CertaraSwitch>

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

Disabled

Label (disabled)

Toggle dark mode

<certara-switch name="example-4" disabled>Label (disabled)</certara-switch>

import { CertaraSwitch } from '@certara/certara-ui-react';

<CertaraSwitch name="example-4" disabled>Label (disabled)</CertaraSwitch>

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

Right layout

Label

Toggle dark mode

<certara-switch name="example-5" layout="right">Label</certara-switch>

import { CertaraSwitch } from '@certara/certara-ui-react';

<CertaraSwitch name="example-5" layout="right">Label</CertaraSwitch>

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

With help

Label Help or instructional text goes here

Toggle dark mode

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

import { CertaraSwitch } from '@certara/certara-ui-react';

<CertaraSwitch name="example-6">
  Label
  <span slot="help">Help or instructional text goes here</span>
</CertaraSwitch>

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

Hide label

The label is hidden, but still accessible

Label is hidden

Toggle dark mode

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

import { CertaraSwitch } from '@certara/certara-ui-react';

<CertaraSwitch name="example-7" hideLabel>Label is hidden</CertaraSwitch>

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