Radio

The TkRadio component is another basic element for user input. You can use this to supply a way for the user to pick an option from multiple choices.

React

import { TkRadio } from '@takeoff-ui/react'

Vue

import { TkRadio } from '@takeoff-ui/vue'

Angular

import { TkRadio } from '@takeoff-ui/angular'

Basic

View Code

React

<TkRadioGroup>
  <TkRadio label="label 1" value="1" />
  <TkRadio label="label 2" value="2" />
</TkRadioGroup>

Vue

<TkRadioGroup>
  <TkRadio label="label 1" value="1" />
  <TkRadio label="label 2" value="2" />
</TkRadioGroup>

Angular

<tk-radio-group>
  <tk-radio label="label 1" value="1" />
  <tk-radio label="label 2" value="2" />
</tk-radio-group>

State

This demo showcases the disabled and invalid states of the radio component.

View Code

React

<TkRadioGroup invalid={true} label="Error">
  <TkRadio label="label 1" value="1" />
  <TkRadio label="label 2" value="2" />
</TkRadioGroup>
<TkRadioGroup invalid={true} label="Disabled">
  <TkRadio label="label 1" value="1" disabled />
  <TkRadio label="label 2" value="2" disabled />
</TkRadioGroup>

Vue

<TkRadioGroup :invalid="true" label="Error">
  <TkRadio label="label 1" value="1" />
  <TkRadio label="label 2" value="2" />
</TkRadioGroup>
<TkRadioGroup :invalid="true" label="Disabled">
  <TkRadio label="label 1" value="1" disabled />
  <TkRadio label="label 2" value="2" disabled />
</TkRadioGroup>

Angular

<tk-radio-group [invalid]="true" label="Error">
  <tk-radio label="label 1" value="1" />
  <tk-radio label="label 2" value="2" />
</tk-radio-group>
<tk-radio-group [invalid]="true" label="Disabled">
  <tk-radio label="label 1" value="1" disabled />
  <tk-radio label="label 2" value="2" disabled />
</tk-radio-group>

Type

This demo showcases the type prop with default and card options.

View Code

React

<TkRadioGroup label="Default Type">
  <TkRadio label="label 1" value="1" />
  <TkRadio label="label 2" value="2" />
</TkRadioGroup>
<TkRadioGroup label="Card Type" type="card">
  <TkRadio label="label 1" value="1" />
  <TkRadio label="label 2" value="2" />
</TkRadioGroup>

Vue

<TkRadioGroup label="Default Type">
  <TkRadio label="label 1" value="1" />
  <TkRadio label="label 2" value="2" />
</TkRadioGroup>
<TkRadioGroup label="Card Type" type="card">
  <TkRadio label="label 1" value="1" />
  <TkRadio label="label 2" value="2" />
</TkRadioGroup>

Angular

<tk-radio-group label="Default Type">
  <tk-radio label="label 1" value="1" />
  <tk-radio label="label 2" value="2" />
</tk-radio-group>
<tk-radio-group label="Card Type" type="card">
  <tk-radio label="label 1" value="1" />
  <tk-radio label="label 2" value="2" />
</tk-radio-group>

Description

This demo showcases the description prop.

View Code

React

<TkRadioGroup>
    <TkRadio label="label 1" value="1" />
    <TkRadio label="label 2" value="2" description="Example description" />
</TkRadioGroup>

Vue

<TkRadioGroup>
    <TkRadio label="label 1" value="1" />
    <TkRadio label="label 2" value="2" description="Example description" />
</TkRadioGroup>

Angular

<tk-radio-group>
  <tk-radio label="label 1" value="1" />
  <tk-radio label="label 2" value="2" description="Example description" />
</tk-radio-group>

Content Slot

This demo illustrates the custom content slots.

Label

Label

View Code

React

<TkRadioGroup type="card" value="0" spread>
  <TkRadio value="0">
    <div slot="content" className="flex items-center gap-2">
      <div>Label</div>
      <TkBadge icon="info" variant="info" label="İnformation" />
    </div>
  </TkRadio>
  <TkRadio value="1">
    <div slot="content" className="flex items-center gap-2">
      <div>Label</div>
      <TkBadge icon="info" variant="info" label="İnformation" />
    </div>
  </TkRadio>
</TkRadioGroup>

Vue

<TkRadioGroup type="card" value="0" spread>
  <TkRadio value="0">
    <div slot="content" className="flex items-center gap-2">
      <div>Label</div>
      <TkBadge icon="info" variant="info" label="İnformation" />
    </div>
  </TkRadio>
  <TkRadio value="1">
    <div slot="content" className="flex items-center gap-2">
      <div>Label</div>
      <TkBadge icon="info" variant="info" label="İnformation" />
    </div>
  </TkRadio>
</TkRadioGroup>

Angular

<tk-radio-group type="card" value="0" spread>
  <tk-radio value="0">
    <div slot="content" class="flex items-center gap-2">
      <div>Label</div>
      <tk-badge icon="info" variant="info" label="İnformation" />
    </div>
  </tk-radio>
  <tk-radio value="1">
    <div slot="content" class="flex items-center gap-2">
      <div>Label</div>
      <tk-badge icon="info" variant="info" label="İnformation" />
    </div>
  </tk-radio>
</tk-radio-group>

Radio API

Props

Name	Type	Default	Description
	boolean	false	Marks the radio button as checked or unchecked.
	string	null	The description sub text displayed.
	boolean	false	Disables the radio button if true.
	boolean	false	Indicates whether the input is in an invalid state
	string	null	Defines the label for the element.
	string	null	The name of the radio group, used to group radio buttons together.
	"left", "right"	null	Determines the position of the radio and label.
	any	null	The value of the radio button.

Events

Name	Description
tk-change	Emitted when the radio button's checked state changes.

Slots

Name	Description
content	Custom content template.

Radio Group API

Props

Name	Type	Default	Description
	"horizontal", "vertical"	'horizontal'	The direction of the radio buttons.
	string	null	This is the error message that will be displayed.
	boolean	false	Indicates whether the input is in an invalid state
	string	null	Defines the label for the element.
	"left", "right"	'left'	Determines the position of the radio group and label.
	boolean	false	Displays a red asterisk (*) next to the label for visual emphasis.
	boolean	false	Determines whether the radios will spread evenly across the horizontal space.
	"card", "default"	'default'	Determines the appearance types of radios.
	any	null	The value of the input.

Events

Name	Description
tk-change	Emitted when the value has changed.