import { useState } from 'react'
import { Field, Label, Radio, RadioGroup } from '@headlessui/react'

const plans = [
  'Developing',
  'Designing',
  'Coding',
  'Graphics Design',
  'Accounting',
  'Frontend',
]

const MainRadioGroupCode = () => {
  const [selected, setSelected] = useState(plans[0])

  return (
    <div>
      <RadioGroup
        value={selected}
        onChange={setSelected}
        aria-label='Server size'
        className='flex flex-col gap-3'>
        {plans.map((plan) => (
          <Field key={plan} className='flex items-center gap-3'>
            <Radio
              value={plan}
              className='group cursor-pointer flex size-5 items-center justify-center rounded-full border border-ld bg-white dark:bg-transparent data-[checked]:bg-primary dark:data-[checked]:bg-primary outline-0'>
              <span className='invisible size-2 rounded-full bg-white group-data-[checked]:visible' />
            </Radio>
            <Label className='text-sm text-ld cursor-pointer'>{plan}</Label>
          </Field>
        ))}
      </RadioGroup>
    </div>
  )
}

export default MainRadioGroupCode

import { useState } from 'react'
import { Description, Field, Label, Radio, RadioGroup } from '@headlessui/react'

const plans = [
  { name: 'Startup', description: '12GB, 6 CPUs, 256GB SSD disk' },
  { name: 'Business', description: '16GB, 8 CPUs, 512GB SSD disk' },
  { name: 'Enterprise', description: '32GB, 12 CPUs, 1TB SSD disk' },
]

const RadioGroupWithDescCode = () => {
  const [selected, setSelected] = useState(plans[0])

  return (
    <div>
      <RadioGroup
        value={selected}
        onChange={setSelected}
        aria-label='Server size'
        className='flex flex-col gap-3'>
        {plans.map((plan) => (
          <Field
            key={plan.name}
            className='flex items-center gap-3 bg-lightgray dark:bg-dark py-2 px-4 rounded-full '>
            <Radio
              value={plan}
              className='group cursor-pointer flex size-5 items-center justify-center rounded-full border border-ld bg-white dark:bg-transparent data-[checked]:bg-primary dark:data-[checked]:bg-primary outline-0'>
              <span className='invisible size-2 rounded-full bg-white group-data-[checked]:visible ' />
            </Radio>
            <div>
              <Label className='text-ld cursor-pointer'>{plan.name}</Label>
              <Description className='text-darklink text-xs'>
                {plan.description}
              </Description>
            </div>
          </Field>
        ))}
      </RadioGroup>
    </div>
  )
}

export default RadioGroupWithDescCode

import { useState } from 'react'
import { Field, Label, Radio, RadioGroup } from '@headlessui/react'

const plans = [
  'Developing',
  'Designing',
  'Coding',
  'Graphics Design',
  'Accounting',
  'Frontend',
]

const DisabledRadioGroupCode = () => {
  const [selected, setSelected] = useState(plans[0])

  return (
    <>
      <div>
        <RadioGroup
          onChange={setSelected}
          aria-label='Server size'
          className='flex flex-col gap-3'>
          {plans.map((plan) => (
            <Field key={plan} className='flex items-center gap-3 '>
              <Radio
                disabled
                value={plan}
                className='group cursor-pointer flex size-5 items-center justify-center rounded-full border border-ld bg-white dark:bg-transparent data-[checked]:bg-primary dark:data-[checked]:bg-primary outline-0'>
                <span className='invisible size-2 rounded-full bg-white group-data-[checked]:visible' />
              </Radio>
              <Label className='text-sm text-ld cursor-pointer opacity-50'>
                {plan}
              </Label>
            </Field>
          ))}
        </RadioGroup>
      </div>
    </>
  )
}

export default DisabledRadioGroupCode

import { useState } from 'react'
import { Icon } from '@iconify/react'
import { Radio, RadioGroup } from '@headlessui/react'

const plans = [
  { name: 'Startup', ram: '12GB', cpus: '6 CPUs', disk: '256GB SSD disk' },
  { name: 'Business', ram: '16GB', cpus: '8 CPUs', disk: '512GB SSD disk' },
  { name: 'Enterprise', ram: '32GB', cpus: '12 CPUs', disk: '1TB SSD disk' },
]

const BasicRadioGroupCode = () => {
  const [selected, setSelected] = useState(plans[0])

  return (
    <div>
      <div className='mx-auto w-full'>
        <RadioGroup
          value={selected}
          onChange={setSelected}
          aria-label='Server size'
          className='space-y-4'>
          {plans.map((plan) => (
            <Radio
              key={plan.name}
              value={plan}
              className='group relative flex cursor-pointer rounded-md bg-lightgray dark:bg-dark py-4 px-5 text-ld shadow-md transition focus:outline-none data-[focus]:outline-1 data-[focus]:outline-primary data-[checked]:bg-primary dark:data-[checked]:bg-primary'>
              <div className='flex w-full items-center justify-between'>
                <div className='text-sm'>
                  <p className='font-semibold text-ld text-base group-data-[checked]:text-white'>
                    {plan.name}
                  </p>
                  <div className='flex gap-2 text-darklink text-sm group-data-[checked]:text-white/50'>
                    <div>{plan.ram}</div>
                    <div aria-hidden='true'>&middot;</div>
                    <div>{plan.cpus}</div>
                    <div aria-hidden='true'>&middot;</div>
                    <div>{plan.disk}</div>
                  </div>
                </div>

                <Icon
                  icon='solar:check-circle-linear'
                  height={20}
                  className='opacity-0 transition group-data-[checked]:opacity-100 text-white'
                />
              </div>
            </Radio>
          ))}
        </RadioGroup>
      </div>
    </div>
  )
}

export default BasicRadioGroupCode

import { useState } from 'react'
import { Field, Label, Radio, RadioGroup } from '@headlessui/react'

const plans = [
  'Developing',
  'Designing',
  'Coding',
  'Graphics Design',
  'Accounting',
  'Frontend',
  'Seo',
]

const WithHtmlRadioFormCode = () => {
  const [selected, setSelected] = useState(plans[0])

  return (
    <div>
      <form action='/plans' method='post'>
        <RadioGroup
          value={selected}
          onChange={setSelected}
          aria-label='Server size'
          className='flex flex-col gap-3'>
          {plans.map((plan) => (
            <Field key={plan} className='flex items-center gap-3'>
              <Radio
                value={plan}
                className='group cursor-pointer flex size-5 items-center justify-center rounded-full border border-ld bg-white dark:bg-transparent data-[checked]:bg-primary dark:data-[checked]:bg-primary outline-0'>
                <span className='invisible size-2 rounded-full bg-white group-data-[checked]:visible' />
              </Radio>
              <Label className='text-sm text-ld cursor-pointer'>{plan}</Label>
            </Field>
          ))}
        </RadioGroup>
        <div className='flex gap-3 mt-4'>
          <button className='ui-button bg-primary'>Submit</button>
          <button className='ui-button bg-error'>Cancel</button>
        </div>
      </form>
    </div>
  )
}

export default WithHtmlRadioFormCode