Tailwind CSS Checkbox with Angular

Use our Tailwind CSS Checkbox built with Angular to allow multi-option selections on your website or applications.

Checkboxes play an important role in enabling users to select multiple options from a list. They should provide immediate feedback upon selection and be spaced adequately for ease of interaction.

Check out our Angular Checkbox example designed with Tailwind CSS. It's ideal for any application that requires multi-select capabilities.

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

    
 import { DUICheckbox } from "david-ui-angular";
 
  @NgModule({
    declarations: [AppComponent],
    imports: [BrowserModule, DUICheckbox],
    providers: [],
    bootstrap: [AppComponent],
  })
  export class AppModule {}
    
  <!-- Use DUI Checkbox in html file -->
  <dui-checkbox color="gray" [isChecked]="true"></dui-checkbox>

Checkbox Colors

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

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

Checkbox Label

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

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

Checkbox Ripple Effect

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

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

Checkbox Custom Icon

You can add custom icon for the Checkbox Component when it's checked by using the dui-icon element inside dui-checkbox .

Favourite 
    
  <!-- Use DUI Checkbox in html file -->
  <dui-checkbox color="gray" label="Favourite" [isChecked]="true" [useCustomIcon]="true">
  <dui-icon>
    <svg
    xmlns="http://www.w3.org/2000/svg"
    class="h-3 w-3"
    viewBox="0 0 20 20"
    fill="currentColor">
    <path
      fillRule="evenodd"
      d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z"
      clipRule="evenodd"
    />
  </svg>
  </dui-icon>
  </dui-checkbox>

Disabled Checkbox

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

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

You can add any element inside dui-checkbox. Here we used typography to make it look like a Link

I agree with the terms and condition

    
  <!-- Use DUI Checkbox in html file -->
  <dui-checkbox color="gray">
        <dui-typography color="gray" variant="paragraph">
          I agree with the <a href="https://www.david-ui-angular.com/docs/checkbox" class="text-blue-500">terms and condition</a>
        </dui-typography>
  </dui-checkbox>

Checkbox with Description

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

Remember me

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

    
  <!-- Use DUI Checkbox in html file -->
  <dui-checkbox 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-checkbox>

Checkbox Properties

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

AttributeType Description Default
labelstringCheckbox label''
colorColorchange checkbox colorblue
classNamestringAdd custom className for checkbox''
sizebooleanChange checkbox sizemd
disabledbooleanDisable checkboxfalse
containerClassNamestringCheckbox container class property''
ripplebooleanToggle ripple effect in checkboxtrue
useCustomIconbooleanuse custom icon in checkboxfalse

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";