WARNING: This component is in

Draft

status. This means that it is still in development and may have bugs or missing features. It is not intended to be used in production. You may use it for testing purposes.

Radio Group

Visually or semantically separates content.

Default

Comfortable

Compact

import { component$ } from '@builder.io/qwik';
import { Label, RadioGroup } from '~/components/ui';

export default component$(() => {
  return (
    <RadioGroup.Root>
      <div class="flex items-center space-x-2">
        <RadioGroup.Item name="size" value="default" id="r1" />
        <Label for="r1">Default</Label>
      </div>
      <div class="flex items-center space-x-2">
        <RadioGroup.Item name="size" value="comfortable" id="r2" />
        <Label for="r2">Comfortable</Label>
      </div>
      <div class="flex items-center space-x-2">
        <RadioGroup.Item name="size" value="compact" id="r3" />
        <Label for="r3">Compact</Label>
      </div>
    </RadioGroup.Root>
  );
});

Installation

Run the following cli command or copy/paste the component code into your project

qwik-ui add radio-group

import { type PropsOf, Slot, component$ } from '@builder.io/qwik';
import { cn } from '@qwik-ui/utils';
 
const Root = component$<PropsOf<'div'>>(({ ...props }) => {
  return (
    <div class={cn('grid gap-2', props.class)} {...props}>
      <Slot />
    </div>
  );
});
 
const Item = component$<PropsOf<'input'>>(({ ...props }) => {
  return (
    <input
      type="radio"
      {...props}
      class={cn(
        'h-4 w-4 accent-primary disabled:cursor-not-allowed disabled:opacity-50',
        props.class,
      )}
    />
  );
});
 
export const RadioGroup = {
  Root,
  Item,
};

Usage

import { Label, RadioGroup } from '~/components/ui';

<RadioGroup.Root>
  <div class="flex items-center space-x-2">
    <RadioGroup.Item name="size" value="default" id="r1" />
    <Label for="r1">Default</Label>
  </div>
  <div class="flex items-center space-x-2">
    <RadioGroup.Item name="size" value="comfortable" id="r2" />
    <Label for="r2">Comfortable</Label>
  </div>
  <div class="flex items-center space-x-2">
    <RadioGroup.Item name="size" value="compact" id="r3" />
    <Label for="r3">Compact</Label>
  </div>
</RadioGroup.Root>