Toggle switch button

A toggle switch button is a graphical user interface (GUI) component that allows the user to switch between two states, such as turning a feature on and off.

freeSignal Forms

Playground

color

size

shape

disabled

checked

HTML

<base-toggle color="primary" size="md" shape="smooth" [checked]="true">Toggle</base-toggle>

Forms

base-toggle implements ControlValueAccessor, so Angular 22 [formField] and formControlName both bind on the host.

HTML

<base-toggle
  [formField]="settingsForm.emails"
  [ariaLabel]="'Product emails'">
</base-toggle>

Native inputs take [formField] directly. CVA hosts (base-toggle, base-custom-select, combobox) use the same binding via Angular’s CVA interop. Full recipe: signal forms cookbook.

TypeScript

import { Component } from '@angular/core';

// Install: npx base-ui-cli add toggle
// Paths are relative to aliases.components (default: src/app/components)
import { ToggleComponent } from './toggle/toggle.component';

@Component({
  selector: 'app-toggle-example',
  imports: [
    ToggleComponent
  ],
  template: `...`
})
export class ToggleExampleComponent {}

Install

bash

npx base-ui-cli add toggle

Default Toggle Button

Default toggle button example below. Use [checked]="true" to switch the button states.

HTML

<base-toggle></base-toggle>
<base-toggle checked="true"></base-toggle>

TypeScript

import { Component } from '@angular/core';

// Install: npx base-ui-cli add toggle
// Paths are relative to aliases.components (default: src/app/components)
import { ToggleComponent } from './toggle/toggle.component';

@Component({
  selector: 'app-toggle-example',
  imports: [
    ToggleComponent
  ],
  template: `...`
})
export class ToggleExampleComponent {}

Install

bash

npx base-ui-cli add toggle

Toggle button disabled

Add [disabled]="true" to the <base-toggle> if need to disable the button

HTML

<base-toggle disabled="true"></base-toggle>
<base-toggle checked="true" disabled="true"></base-toggle>

TypeScript

import { Component } from '@angular/core';

// Install: npx base-ui-cli add toggle
// Paths are relative to aliases.components (default: src/app/components)
import { ToggleComponent } from './toggle/toggle.component';

@Component({
  selector: 'app-toggle-example',
  imports: [
    ToggleComponent
  ],
  template: `...`
})
export class ToggleExampleComponent {}

Install

bash

npx base-ui-cli add toggle

Toggle button shape

By default toggle button is with squire knob and border radius. To turn it to circular knob and fully rounded use shape="rounded"

HTML

<base-toggle disabled="true"></base-toggle>
<base-toggle checked="true" disabled="true"></base-toggle>

TypeScript

import { Component } from '@angular/core';

// Install: npx base-ui-cli add toggle
// Paths are relative to aliases.components (default: src/app/components)
import { ToggleComponent } from './toggle/toggle.component';

@Component({
  selector: 'app-toggle-example',
  imports: [
    ToggleComponent
  ],
  template: `...`
})
export class ToggleExampleComponent {}

Install

bash

npx base-ui-cli add toggle

Toggle button sizes

Use attribute size="" to define toggle button size. Toggle button support 3 sizes "sm", "lg" and the default one

HTML

<base-toggle size="sm"></base-toggle>
<base-toggle></base-toggle>
<base-toggle size="lg"></base-toggle>

<base-toggle shape="rounded" size="sm"></base-toggle>
<base-toggle shape="rounded" ></base-toggle>
<base-toggle shape="rounded" size="lg"></base-toggle>

TypeScript

import { Component } from '@angular/core';

// Install: npx base-ui-cli add toggle
// Paths are relative to aliases.components (default: src/app/components)
import { ToggleComponent } from './toggle/toggle.component';

@Component({
  selector: 'app-toggle-example',
  imports: [
    ToggleComponent
  ],
  template: `...`
})
export class ToggleExampleComponent {}

Install

bash

npx base-ui-cli add toggle

Toggle button colors

Use color="" attribute to define toggle button color. Supported colors are "primary", "success", "danger", "warning" and "accent"

Standalone toggles (no visible text next to the switch) need [ariaLabel] so the native checkbox has an accessible name. Do not set aria-label on the host — Angular binds aria-* attributes to the component element, which never reaches this input.

HTML

<base-toggle [ariaLabel]="'Two-factor authentication'"></base-toggle>

TypeScript

import { Component } from '@angular/core';

// Install: npx base-ui-cli add toggle
// Paths are relative to aliases.components (default: src/app/components)
import { ToggleComponent } from './toggle/toggle.component';

@Component({
  selector: 'app-toggle-example',
  imports: [
    ToggleComponent
  ],
  template: `...`
})
export class ToggleExampleComponent {}

Install

bash

npx base-ui-cli add toggle

Installation

Run the following command to add this component to your project:

bash

npx base-ui-cli add toggle

API Reference

For AI agents

Copy a prompt with the registry name, CLI install, and import — or add the Base UI MCP server.

bash

npx -y base-ui-ng-mcp

Base UI provides standalone components. Import the exact elements you want to use into your component.

typescript (Example)

// Install: npx base-ui-cli add toggle
// Paths are relative to aliases.components (default: src/app/components)
import { ToggleComponent } from './toggle/toggle.component';

@Component({
  selector: 'app-your-component',
  imports: [
    ToggleComponent
  ],
  template: `...`
})
export class YourComponent {}

API for toggle — generated from JSDoc in the library source.

API reference for toggle
API	Member	Type	Default	Description
`base-toggle`	`color`	`ToggleColor`	`'primary'`	The semantic color variant applied when the toggle is checked.
`base-toggle`	`size`	`ToggleSize`	`'md'`	The physical size of the toggle switch.
`base-toggle`	`shape`	`ToggleShape`	`'smooth'`	The border-radius style of the toggle track and thumb.
`base-toggle`	`ariaLabel`	`string \| undefined`	`undefined`	Accessible name applied to the underlying checkbox input, for cases where the toggle has no adjacent visible text label (e.g. a standalone switch). Bound as a property (not `aria-label`): Angular applies `aria-*` attribute bindings to the host element, which never reaches this input.
`base-toggle`	`disabled`	`boolean`	`false`	Whether the control is disabled (consumer-facing input).
`base-toggle`	`checked`	`boolean`	`false`	The current checked/unchecked state.

Base UI (Angular) — base-ui.net — is a CLI-first Angular + Tailwind CSS component library with 215 components and blocks (125 free), delivered shadcn-style: npx base-ui-cli add copies the TypeScript/HTML source into your project, where you own and edit it. There is no npm library package. Not MUI Base UI (base-ui.com, React).

Toggle switch button

HTML

Forms

HTML

TypeScript

bash

Default Toggle Button

HTML

TypeScript

bash

Toggle button disabled

HTML

TypeScript

bash

Toggle button shape

HTML

TypeScript

bash

Toggle button sizes

HTML

TypeScript

bash

Toggle button colors

HTML

TypeScript

bash

Accessible name

HTML

TypeScript

bash

Installation

bash

API Reference

bash

typescript (Example)