# certara-switch



<!-- Auto Generated Below -->


## Overview

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.

## Properties

| Property    | Attribute    | Description                                                                                  | Type                | Default        |
| ----------- | ------------ | -------------------------------------------------------------------------------------------- | ------------------- | -------------- |
| `checked`   | `checked`    | Whether the switch is in the "on" state.                                                     | `boolean`           | `false`        |
| `disabled`  | `disabled`   | Whether the switch is disabled and non-interactive.                                          | `boolean`           | `false`        |
| `hideLabel` | `hide-label` | Visually hides the label while keeping it accessible to screen readers.                      | `boolean`           | `false`        |
| `layout`    | `layout`     | Controls the layout of the switch relative to its label.                                     | `"right"`           | `undefined`    |
| `name`      | `name`       | The name attribute for the underlying input element. Defaults to a unique auto-generated ID. | `string`            | `this.inputId` |
| `size`      | `size`       | The size variant of the switch.                                                              | `"default" \| "sm"` | `'default'`    |
| `value`     | `value`      | The value submitted with form data when checked.                                             | `any`               | `'on'`         |


## Events

| Event           | Description                                                                                              | Type                                          |
| --------------- | -------------------------------------------------------------------------------------------------------- | --------------------------------------------- |
| `certaraBlur`   | Emitted when the switch loses focus.                                                                     | `CustomEvent<void>`                           |
| `certaraChange` | Emitted when the switch state changes. Event detail contains `checked` (boolean) and `value` properties. | `CustomEvent<CheckboxChangeEventDetail<any>>` |
| `certaraFocus`  | Emitted when the switch receives focus.                                                                  | `CustomEvent<void>`                           |


## Slots

| Slot     | Description                                                                             |
| -------- | --------------------------------------------------------------------------------------- |
|          | Default slot for the label text                                                         |
| `"help"` | Optional help text displayed below the label. Supports interactive elements like links. |


## Dependencies

### Depends on

- [certara-help-block](../help-block)

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

----------------------------------------------