import Head from "next/head"; import React, { useState } from "react"; import * as RadioArea from "@components/ui/form/radio-area"; const selectOptions = [ { value: "rabbit", label: "Rabbit", description: "Fast and hard.", }, { value: "turtle", label: "Turtle", description: "Slow and steady.", }, ]; export default function RadioAreaPage() { const [formData, setFormData] = useState({}); return ( <>

RadioArea component

{ e.preventDefault(); }} className="mb-2 space-y-4"> setFormData({ ...formData, radioGroup_1 })} className="flex max-w-screen-md space-x-4 rtl:space-x-reverse" name="radioGroup_1"> radioGroup_1_radio_1

Description #1

 radioGroup_1_radio_2

Description #2

 radioGroup_1_radio_3

Description #3

 setFormData({ ...formData, radioGroup_2 })} className="flex max-w-screen-md space-x-4 rtl:space-x-reverse" name="radioGroup_2"> radioGroup_1_radio_1

Description #1

 radioGroup_1_radio_2

Description #2

 radioGroup_1_radio_3

Description #3

Disabled RadioAreaSelect

RadioArea disabled with custom placeholder

RadioArea with options

setFormData({ ...formData, turtleOrRabbitWinsTheRace }) } options={selectOptions} placeholder="Does the rabbit or the turtle win the race?" />

RadioArea with default selected (disabled for clarity)

{JSON.stringify(formData)}
); }