Tailwind CSS Switch with Angular

Use our Tailwind CSS Switch component to let users adjust settings on/off. The option that the Switch controls, as well as the state it's in, should be made clear from the corresponding inline label.

See below our example that will help you create simple and easy-to-use Switch component for your Tailwind CSS and React project.

You first need to import the DUISwitch Module into your application module

     import { DUISwitch } from "david-ui-angular";
 
  @NgModule({
    declarations: [AppComponent],
    imports: [BrowserModule, DUISwitch],
    providers: [],
    bootstrap: [AppComponent],
  })
  export class AppModule {}

      <!-- Use DUI Switch in html file -->
  <dui-switch color="gray"></dui-switch>

Switch Colors

You can use different colors of the Switch component by manipulating the color attribute of the component

      <!-- Use DUI Switch in html file -->
  <dui-switch color="gray" [isChecked]="true"></dui-switch>
  <dui-switch color="red"  [isChecked]="true"></dui-switch>
  <dui-switch color="purple" [isChecked]="true"></dui-switch>

Switch Label

You can add a label for the Switch component by passing the label prop to the switch component.

Auto Recharge

      <!-- Use DUI switch in html file -->
  <dui-switch color="gray" label="Auto Recharge" [isChecked]="true"></dui-switch>

Swicth Ripple Effect

You can turn on/off the ripple effect for the switch Component using ripple attribute.

Ripple Effect On

Ripple Effect Off

     <!-- Use DUI switch in html file -->
  <dui-switch color="gray" label="Ripple Effect On" [isChecked]="true" [ripple]="true" >
  </dui-switch>
  <dui-switch color="gray" label="Ripple Effect Off" [isChecked]="true" [ripple]="false">
  </dui-switch>

Disabled Switch

You can disable the Switch component by passing the disabled prop to the Checkbox component.

Remember Me

     <!-- Use DUI switch in html file -->
  <dui-switch color="gray" label="Remember Me" [isChecked]="true" [disabled]="true" > 
  </dui-switch>
  <dui-switch color="gray" label="Remember Me" [disabled]="true"></dui-switch>

Switch with Description

Use the example below for a more complex usage of switch with label that contains some description.

Remember me

You'll be able to login without password for 24 hours.

      <!-- Use DUI Switch in html file -->
  <dui-switch color="gray" label="Remember me">
    <div>
      <dui-typography color="gray" variant="small" className="font-normal">
        You&apos;ll be able to login without password for 24 hours.
      </dui-typography>
 
    </div>
  </dui-switch>

Switch Properties

The following properties are available for dui-switch component. These are the custom properties that we've added for the switch component and you can use all the other native properties as well.

Attribute	Type	Description	Default
`label`	`string`	switch label	`''`
`color`	`Color`	change switch color	`blue`
`className`	`string`	Add custom className for switch	`''`
`size`	`boolean`	Change switch size	`md`
`disabled`	`boolean`	Disable switch	`false`
`containerProps`	`containerProps`	switch container class property	`''`
`circleProps`	`circleProps`	switch circle class property	`''`
`ripple`	`boolean`	Toggle ripple effect in switch	`true`

Type - Color

     type colors =
  | "blue-gray"
  | "gray"
  | "brown"
  | "deep-orange"
  | "orange"
  | "amber"
  | "yellow"
  | "lime"
  | "light-green"
  | "green"
  | "teal"
  | "cyan"
  | "light-blue"
  | "blue"
  | "indigo"
  | "deep-purple"
  | "purple"
  | "pink"
  | "red";

	import { DUISwitch } from "david-ui-angular";

	@NgModule({
	declarations: [AppComponent],
	imports: [BrowserModule, DUISwitch],
	providers: [],
	bootstrap: [AppComponent],
	})
	export class AppModule {}

	<!-- Use DUI Switch in html file -->
	<dui-switch color="gray"></dui-switch>

	<!-- Use DUI Switch in html file -->
	<dui-switch color="gray" [isChecked]="true"></dui-switch>
	<dui-switch color="red" [isChecked]="true"></dui-switch>
	<dui-switch color="purple" [isChecked]="true"></dui-switch>

	<!-- Use DUI switch in html file -->
	<dui-switch color="gray" label="Auto Recharge" [isChecked]="true"></dui-switch>

	<!-- Use DUI switch in html file -->
	<dui-switch color="gray" label="Ripple Effect On" [isChecked]="true" [ripple]="true" >
	</dui-switch>
	<dui-switch color="gray" label="Ripple Effect Off" [isChecked]="true" [ripple]="false">
	</dui-switch>

	<!-- Use DUI switch in html file -->
	<dui-switch color="gray" label="Remember Me" [isChecked]="true" [disabled]="true" >
	</dui-switch>
	<dui-switch color="gray" label="Remember Me" [disabled]="true"></dui-switch>

	<!-- Use DUI Switch in html file -->
	<dui-switch color="gray" label="Remember me">
	<div>
	<dui-typography color="gray" variant="small" className="font-normal">
	You'll be able to login without password for 24 hours.
	</dui-typography>

	</div>
	</dui-switch>

	type colors =
	\| "blue-gray"
	\| "gray"
	\| "brown"
	\| "deep-orange"
	\| "orange"
	\| "amber"
	\| "yellow"
	\| "lime"
	\| "light-green"
	\| "green"
	\| "teal"
	\| "cyan"
	\| "light-blue"
	\| "blue"
	\| "indigo"
	\| "deep-purple"
	\| "purple"
	\| "pink"
	\| "red";