Switch

Show design guidelines

Code

Framework HTML React Angular

Default

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>

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

<CertaraSwitch name="example-1">
  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-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>

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

<CertaraSwitch name="example-2" size="sm">
  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-2" size="sm">
  Label
  <span slot="help">Help or instructional text goes here</span>
</certara-switch>

Checked

Label (checked) Help or instructional text goes here

Toggle dark mode

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

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

<CertaraSwitch name="example-3" checked>
  Label (checked)
  <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-3" checked>
  Label (checked)
  <span slot="help">Help or instructional text goes here</span>
</certara-switch>

Disabled

Label (disabled) Help or instructional text goes here

Toggle dark mode

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

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

<CertaraSwitch name="example-4" disabled>
  Label (disabled)
  <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-4" disabled>
  Label (disabled)
  <span slot="help">Help or instructional text goes here</span>
</certara-switch>

certara-switch

A toggle switch component for binary on/off states.

Properties

alignment

Attribute	alignment
Type	"left" | "right"
Default	undefined
Required	false
Description	Controls the horizontal alignment of the switch relative to its label.

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.

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