Tailwind CSS Select with Angular

Use our Tailwind CSS Select built with Angular to provide a dropdown menu of options for your users on your website or applications.

Select menus are essential for giving users a list of choices without overwhelming the display space. They streamline form filling by providing multiple options in a compact dropdown. For a great user experience, selects should offer clear options and reflect the current choice effectively.

Below we present you our Angular Select component crafted with Tailwind CSS, to integrate into applications that demand quality and efficiency. Check it out!

You first need to import the DUISelect Module into your application module.
*Also make sure you have angular-cdk installed with it's styles imported in your css file.

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

Select an option

      
  <div class="w-80">
    <dui-select [optionsList]="options">
      <dui-options *ngFor="let option of options" [value]="option">{{
        option
      }}</dui-options>
    </dui-select>
  </div>

Select Variants

The Select component comes with 3 different variants that you can change it using the variant prop.

Select a Version

      
  <div class="flex w-80 flex-col gap-8">
        <dui-select
          label="Select a Version"
          variant="standard"
          [optionsList]="optionsStandard"
        >
          <dui-options
            *ngFor="let option of optionsStandard"
            [value]="option"
            >{{ option }}</dui-options
          >
        </dui-select>
 
        <dui-select
          variant="outlined"
          label="Select a Version"
          [optionsList]="optionsStandard"
        >
          <dui-options
            *ngFor="let option of optionsStandard"
            [value]="option"
            >{{ option }}</dui-options
          >
        </dui-select>
        <dui-select
          label="Select a Version"
          variant="static"
          [optionsList]="optionsStandard"
        >
          <dui-options
            *ngFor="let option of optionsStandard"
            [value]="option"
            >{{ option }}</dui-options
          >
        </dui-select>
      </div>

Select Sizes

The Select component comes with 2 different size that you can change it using the size prop.

Select a Version

      
  <div class="flex w-80 flex-col gap-8">
    <dui-select
      label="Select a Version"
      size="md"
      [optionsList]="optionsStandard"
    >
      <dui-options
        *ngFor="let option of optionsStandard"
        [value]="option"
        >{{ option }}</dui-options
      >
    </dui-select>
 
    <dui-select
      label="Select a Version"
      size="lg"
      [optionsList]="optionsStandard"
    >
      <dui-options
        *ngFor="let option of optionsStandard"
        [value]="option"
        >{{ option }}</dui-options
      >
    </dui-select>
  </div>

Select Colors

The Select component comes with 19 different colors that you can change it using the color prop.

Select a Version

      
  <div class="flex w-80 flex-col gap-8">
    <dui-select
      label="Select a Version"
      color="blue"
      [optionsList]="optionsStandard"
    >
      <dui-options
        *ngFor="let option of optionsStandard"
        [value]="option"
        >{{ option }}</dui-options
      >
    </dui-select>
 
    <dui-select
      label="Select a Version"
      color="purple"
      [optionsList]="optionsStandard"
    >
      <dui-options
        *ngFor="let option of optionsStandard"
        [value]="option"
        >{{ option }}</dui-options
      >
    </dui-select>
    <dui-select
      label="Select a Version"
      color="green"
      [optionsList]="optionsStandard"
    >
      <dui-options
        *ngFor="let option of optionsStandard"
        [value]="option"
        >{{ option }}</dui-options
      >
    </dui-select>
  </div>

Select Disabled

The Select component can be disabled using the disabled prop.

Select a Version

      
  <div class="flex w-80 flex-col gap-8">
    <dui-select
      label="Select a Version"
      color="blue"
      [disabled]="true"
      [optionsList]="optionsStandard"
    >
      <dui-options
        *ngFor="let option of optionsStandard"
        [value]="option"
        >{{ option }}</dui-options
      >
    </dui-select>
 
 
  </div>

Select Properties

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

Attribute	Type	Description	Default
`variant`	`Variant`	change select variant	`filled`
`color`	`Color`	change select color	`gray`
`className`	`string`	Add custom className for select	`''`
`size`	`boolean`	Change select size	`md`
`label`	`string`	Label for select	`Enter your text`
`name`	`string`	Name prop for select	`''`
`type`	`string`	Type prop for select	`text`
`error`	`boolean`	Change select state to error	`false`
`success`	`boolean`	Change select state to success	`false`
`disabled`	`boolean`	Disable select	`false`
`required`	`boolean`	Make select as required	`false`
`readonly`	`boolean`	Make select readonly	`false`
`autoHeight`	`boolean`	Make select readonly	`undefined`
`lockScroll`	`boolean`	Make select readonly	`undefined`

Option Properties

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

Attribute	Type	Description	Default
`value`	`string`	Value for select	`undefined`
`key`	`string`	Key prop for select	`undefined`
`disabled`	`boolean`	Disable select	`false`

Type - Variant

     
  type variant = "standard" | "outlined" | "static"

Type - Size

     
  type size = 'md' | 'lg';

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 { DUISelect } from "david-ui-angular";

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


	<div class="w-80">
	<dui-select [optionsList]="options">
	<dui-options *ngFor="let option of options" [value]="option">{{
	option
	}}</dui-options>
	</dui-select>
	</div>


	<div class="flex w-80 flex-col gap-8">
	<dui-select
	label="Select a Version"
	variant="standard"
	[optionsList]="optionsStandard"
	>
	<dui-options
	*ngFor="let option of optionsStandard"
	[value]="option"
	>{{ option }}</dui-options
	>
	</dui-select>

	<dui-select
	variant="outlined"
	label="Select a Version"
	[optionsList]="optionsStandard"
	>
	<dui-options
	*ngFor="let option of optionsStandard"
	[value]="option"
	>{{ option }}</dui-options
	>
	</dui-select>
	<dui-select
	label="Select a Version"
	variant="static"
	[optionsList]="optionsStandard"
	>
	<dui-options
	*ngFor="let option of optionsStandard"
	[value]="option"
	>{{ option }}</dui-options
	>
	</dui-select>
	</div>

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