Basic
Requirement
This component requires the Tailwind Forms Plugin to be installed.
Please refer to the Installation guide for instructions.
In your tailwind.config.js:
module.exports = {
// ...
plugins: [
// ...
require('@tailwindcss/forms'),
],
}Description
This component is used to create a radio button. It can be used alone or in a group.
API
Supports global configuration
View the default configuration for this component. Learn more about global configuration.
import { LuiRadioModule } from '@lqvrent-workspace/lqvrent-ui/radio';<lui-radio-group [(ngModel)]="value">
<label lui-radio luiValue="A">A</label>
<label lui-radio luiValue="B">B</label>
</lui-radio-group>[lui-radio]
| Property | Description | Type | Default |
|---|---|---|---|
[luiValue] | Value of the radio button | any | - |
[luiDisabled] | Disable the radio button | boolean | false |
[luiAutofocus] | Autofocus the radio button | boolean | false |
[luiRadioClass] | Styling class | string | defined in config |
lui-radio-group
| Property | Description | Type | Default |
|---|---|---|---|
[luiMode] | Mode of the group | 'default' | 'card' | 'tabs' | default |
[luiDisabled] | Disable the group | boolean | false |
[luiName] | Name of the group | string | - |
[luiTabsVertical] | If luiMode is tabs, display the tabs vertically | boolean | false |
More examples
Radio group
Vertical radio group
Radio group inline label
Dynamic radio group
Radio group name
The luiName attribute allows the browser to see the group as a "real" radio group. This is useful for accessibility purposes.
Radio group card
To customize the style of the card, you must edit the card property in the global configuration.
Radio group card responsive
Radio group tabs
To customize the style of the tabs, you must edit the tabs property in the global configuration.