Smart Radio Group

Selection interface utilizing background masks and iconography. Radio options display with animated highlight masks and icon support.

...

How to Import

Add this import to your component file

app/page.tsx

1import SmartRadioGroup from "@/components/lightswind-pro/smart-radio-group"

Props

Properties and options for customizing this component

Name	Type	Default	Description	Required

options	{ value: string; label: string; icon?: React.ReactNode }[]	-	Radio options.	Required
defaultValue	string	-	Initially selected option value.	Optional
onChange	(value: string) => void	-	Callback when selection changes.	Optional

Basic Usage

Here’s a simple example of how to use this component

app/page.tsx

1import SmartRadioGroup from "@/components/lightswind-pro/smart-radio-group";
2
3const options = [
4  { value: "monthly", label: "Monthly", icon: <CalendarIcon /> },
5  { value: "yearly", label: "Yearly", icon: <StarIcon /> },
6];
7
8export function Demo() {
9  return <SmartRadioGroup options={options} defaultValue="monthly" />;
10}

Previoustag-input

Nextfloating-label-input

A product byＭＵＨＩＬＡＮ and Team❤️.

Smart Radio Group

Selection interface utilizing background masks and iconography. Radio options display with animated highlight masks and icon support.

...

How to Import

Add this import to your component file

app/page.tsx

1import SmartRadioGroup from "@/components/lightswind-pro/smart-radio-group"

Props

Properties and options for customizing this component

Name	Type	Default	Description	Required

options	{ value: string; label: string; icon?: React.ReactNode }[]	-	Radio options.	Required
defaultValue	string	-	Initially selected option value.	Optional
onChange	(value: string) => void	-	Callback when selection changes.	Optional

Basic Usage

Here’s a simple example of how to use this component

app/page.tsx

1import SmartRadioGroup from "@/components/lightswind-pro/smart-radio-group";
2
3const options = [
4  { value: "monthly", label: "Monthly", icon: <CalendarIcon /> },
5  { value: "yearly", label: "Yearly", icon: <StarIcon /> },
6];
7
8export function Demo() {
9  return <SmartRadioGroup options={options} defaultValue="monthly" />;
10}

Previoustag-input

Nextfloating-label-input

A product byＭＵＨＩＬＡＮ and Team❤️.

Smart Radio Group

How to Import

Props

Basic Usage

On This Page

Contribute

Smart Radio Group

How to Import

Props

Basic Usage

On This Page

Contribute

React Smart Radio Group Component - Lightswind UI

Key Details of React Smart Radio Group

Smart Radio Group

How to Import

Props

Basic Usage

On This Page

Contribute

Smart Radio Group

How to Import

Props

Basic Usage

On This Page

Contribute