import * as RadioArea from "@components/ui/form/radio-area"; import Head from "next/head"; import React, { useState } from "react"; 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({}); const onSubmit = (e) => { e.preventDefault(); }; return ( <>

RadioArea component

setFormData({ ...formData, radioGroup_1 })} className="flex space-x-4 max-w-screen-md" 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 space-x-4 max-w-screen-md" 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)}
); }