Component · Forms

Toggle

an on/off switch for an immediate setting.

Example

Playground

checked
disabled
size 
 
 
 
Where available
 
 
 ✓ React 
 ✓ Angular 
 ✓ Web Components 
 ✓ Blazor 
 ✓ Tokens 
 
 
Using it
 
the same component, named idiomatically per target. one CSS contract underneath, so they render identically.
 
 
 
TargetReferencePackage
  
 React <Toggle> @design-foundry/lucent-react 
 Angular <lucent-toggle> @design-foundry/lucent 
 Web Components <lucent-toggle> @design-foundry/lucent-wc 
 Blazor <LucentToggle> DesignFoundry.Lucent 
  
 
  
API
 
 
 
PropTypeDefaultDescription
  
 checked boolean false on/off state. 
 size sm | md md control size. 
 label string — accessible label.