@tailus/themer-radio-group v0.0.1
Radio Group Component Theme
Overview
The radio group component theme is a collection of Tailwind CSS utilities that can be used to create radio groups with different variants. Radio groups are used to allow users to select a single option from a list.
Installation
To install the radio group component theme, run the following command:
npm install @tailus/themer-radio-group
Importation
To import the radio group component theme, you can use the following import:
import { radioGroup, shadowVariant } from "@tailus/themer-radio-group";
Variants
The radio group component theme provides two variants:
Default
(default): The default variant.ShadowVariant
: A variant with an inner shadow.
Props
The radio group component theme object contains the following properties:
root
: The Tailwind CSS utilities for the root element of the radio group component.indicator
: The Tailwind CSS utilities for the indicator element of the radio group component.label
: The Tailwind CSS utilities for the label element of the radio group component.
Usage
To use the radio group component theme, simply import the appropriate variant and add its properties to the radio group element and its child elements. For example, to create a default radio group component, you would import the radioGroup
variant and add its properties to the radio group element.
Example (Radix UI)
import * as RadioGroup from "@radix-ui/react-radio-group";
import { radioGroup as radioTheme } from "@tailus/themer-radio-group";
const RadioGroupUI = () => (
<form>
<RadioGroup.Root
className="flex flex-col gap-2.5"
defaultValue="problem"
aria-label="View density"
>
<div className="flex items-center">
<RadioGroup.Item className={radioTheme.item} value="understanding" id="rr1">
<RadioGroup.Indicator className={radioTheme.indicator} />
</RadioGroup.Item>
<label className={radioTheme.label} htmlFor="rr1">
Easy to understand
</label>
</div>
<div className="flex items-center">
<RadioGroup.Item className={radioTheme.item} value="problem" id="rr2">
<RadioGroup.Indicator className={radioTheme.indicator} />
</RadioGroup.Item>
<label className={radioTheme.label} htmlFor="rr2">
Solved my problem
</label>
</div>
<div className="flex items-center">
<RadioGroup.Item className={radioTheme.item} value="other" id="rr3">
<RadioGroup.Indicator className={radioTheme.indicator} />
</RadioGroup.Item>
<label className={radioTheme.label} htmlFor="rr3">
Other
</label>
</div>
</RadioGroup.Root>
</form>
);
export default RadioGroupUI;
ShadowVariant
To create a shadow variant radio group, you would import the shadowVariant
variant and add its properties to the radio group element.
import * as RadioGroup from "@radix-ui/react-radio-group";
import { shadowVariant as radioTheme } from "@tailus/themer-radio-group";
const RadioGroupShadowVariant = () => (
<form>
<RadioGroup.Root
className="flex flex-col gap-2.5"
defaultValue="understanding"
aria-label="View density"
>
<div className="flex items-center">
<RadioGroup.Item className={radioTheme.item} value="understanding" id="srr1">
<RadioGroup.Indicator className={radioTheme.indicator} />
</RadioGroup.Item>
<label className={radioTheme.label} htmlFor="srr1">
Easy to understand
</label>
</div>
<div className="flex items-center">
<RadioGroup.Item className={radioTheme.item} value="problem" id="srr2">
<RadioGroup.Indicator className={radioTheme.indicator} />
</RadioGroup.Item>
<label className={radioTheme.label} htmlFor="srr2">
Solved my problem
</label>
</div>
<div className="flex items-center">
<RadioGroup.Item className={radioTheme.item} value="other" id="srr3">
<RadioGroup.Indicator className={radioTheme.indicator} />
</RadioGroup.Item>
<label className={radioTheme.label} htmlFor="srr3">
Other
</label>
</div>
</RadioGroup.Root>
</form>
);
export default RadioGroupShadowVariant;
Note: There is no customization available for the radio group component theme at this time.
7 months ago