Free
Pro

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.

free

Default Toggle Button

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


HTML

Toggle button disabled

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


HTML

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

Toggle button sizes

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


HTML

Toggle button colors

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


HTML

Accessible name

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

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-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
APIMemberTypeDefaultDescription
base-togglecolorToggleColor'primary'The semantic color variant applied when the toggle is checked.
base-togglesizeToggleSize'md'The physical size of the toggle switch.
base-toggleshapeToggleShape'smooth'The border-radius style of the toggle track and thumb.
base-toggleariaLabelstring | undefinedundefinedAccessible 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-toggledisabledbooleanfalseWhether the control is disabled (consumer-facing input).
base-togglecheckedbooleanfalseThe current checked/unchecked state.