Tailwind CSS Radio Button with Angular

Use our Tailwind CSS Radio Button built with Angular to ensure single-option selections on your website or applications.

Radio buttons are essential for choices where only one option can be selected from a list. They guide users in making clear-cut decisions and prevent multiple selections. It's very important that radio buttons give a clear indication of the selected and non-selected state for ease of use.

Below, explore our Angular Radio Button example designed with Tailwind CSS.

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

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

     
  <dui-radio name="foo" value="1" color="gray"></dui-radio>

Radio Button Disabled

You can disable the radio button by adding the disabled attribute to the component

Angular

     
  <dui-radio name="radio-name" label="Angular" value="1" color="gray" [disabled]="true"></dui-radio>

Radio Button Label

You can add a label to the radio button by adding the label attribute to the component

Angular

React

Vuejs

     
  <dui-radio name="radio-name" label="Angular" value="1" color="gray"></dui-radio>
  <dui-radio name="radio-name" label="React" value="2" color="gray"></dui-radio>
  <dui-radio name="radio-name" label="Vuejs" value="3" color="gray"></dui-radio>

Radio Button Colors

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

Angular

React

VueJS

     
  <dui-radio name="radio-name" label="Angular" value="1" color="red"></dui-radio>
  <dui-radio name="radio-name" label="React" value="2" color="blue"></dui-radio>
  <dui-radio name="radio-name" label="Vuejs" value="3" color="green"></dui-radio>

Radio Ripple Effect

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

Ripple Effect On

Ripple Effect Off

     
  <dui-radio
  color="gray"
  name="radio-ripple-effect"
  label="Ripple Effect On"
  value="1"
  [ripple]="true">
  </dui-radio>
 
  <dui-radio
  color="gray"
  name="radio-ripple-effect"
  label="Ripple Effect Off"
  value="2"
  [ripple]="false"></dui-radio>

Radio Custom Icon

You can add custom icon for the Radio Component when it's filled by using the dui-icon element inside dui-radio .

Radio Custom Icon

     <dui-radio
  color="gray"
  name="radio-custom-icon"
  label="Radio Custom Icon"
  value="2"
  [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-radio>

Disabled Radio Button

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

Angular

React

Vuejs

      <dui-radio name="radio-name" label="Angular" value="1" [disabled]="true" color="gray"></dui-radio>
  <dui-radio name="radio-name" label="React" value="2" [disabled]="true" color="gray"></dui-radio>
  <dui-radio name="radio-name" label="Vuejs" value="3" [disabled]="true" color="gray"></dui-radio>

Radio with Link

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

I agree with the terms and condition

          
  <dui-radio color="gray"  name="radio-name-link" value="1"  >
    <dui-typography color="gray" variant="paragraph">
      I agree with the <a href="https://www.david-ui-angular.com/docs/radio" class="text-blue-500">terms and condition</a>
    </dui-typography>
  </dui-radio>

Radio with Description

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

Remember me

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

     
  <dui-radio color="gray" label="Remember me" name="radio-name-description" value="1">
    <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-radio>

Radio Properties

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

Attribute	Type	Description	Default
`label`	`string`	radio label	`''`
`color`	`Color`	change radio color	`blue`
`className`	`string`	Add custom className for radio	`''`
`size`	`boolean`	Change radio size	`md`
`disabled`	`boolean`	Disable radio	`false`
`containerClassName`	`string`	radio container class property	`''`
`ripple`	`boolean`	Toggle ripple effect in radio	`true`
`useCustomIcon`	`boolean`	use custom icon in radio	`false`

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

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


	<dui-radio name="radio-name" label="Angular" value="1" color="gray" [disabled]="true"></dui-radio>


	<dui-radio name="radio-name" label="Angular" value="1" color="gray"></dui-radio>
	<dui-radio name="radio-name" label="React" value="2" color="gray"></dui-radio>
	<dui-radio name="radio-name" label="Vuejs" value="3" color="gray"></dui-radio>


	<dui-radio
	color="gray"
	name="radio-ripple-effect"
	label="Ripple Effect On"
	value="1"
	[ripple]="true">
	</dui-radio>

	<dui-radio
	color="gray"
	name="radio-ripple-effect"
	label="Ripple Effect Off"
	value="2"
	[ripple]="false"></dui-radio>

	<dui-radio
	color="gray"
	name="radio-custom-icon"
	label="Radio Custom Icon"
	value="2"
	[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-radio>


	<dui-radio color="gray" name="radio-name-link" value="1" >
	<dui-typography color="gray" variant="paragraph">
	I agree with the <a href="https://www.david-ui-angular.com/docs/radio" class="text-blue-500">terms and condition</a>
	</dui-typography>
	</dui-radio>


	<dui-radio color="gray" label="Remember me" name="radio-name-description" value="1">
	<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-radio>

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