Radio Group - shadcn-svelte

Docs

Radio Group

A set of checkable buttons—known as radio buttons—where no more than one of the buttons can be checked at a time.

Component Source Primitive API Reference

	<script lang="ts">
  import * as RadioGroup from "$lib/components/ui/radio-group";
  import { Label } from "$lib/components/ui/label";
</script>

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

	<script lang="ts">
  import * as RadioGroup from "$lib/components/ui/radio-group";
  import { Label } from "$lib/components/ui/label";
</script>

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

Installation

	npx shadcn-svelte@latest add radio-group

Usage

	<script lang="ts">
  import { Label } from "$lib/components/ui/label";
  import * as RadioGroup from "$lib/components/ui/radio-group";
</script>

<RadioGroup.Root value="option-one">
  <div class="flex items-center space-x-2">
    <RadioGroup.Item value="option-one" id="option-one" />
    <Label for="option-one">Option One</Label>
  </div>
  <div class="flex items-center space-x-2">
    <RadioGroup.Item value="option-two" id="option-two" />
    <Label for="option-two">Option Two</Label>
  </div>
</RadioGroup.Root>

Examples

Form

When using a radio group with a form, you'll want to use the <Form.RadioGroup /> and <Form.RadioItem /> components, which are wrappers around your existing radio group components that nicely handle the form state for you.

	<script lang="ts" context="module">
  import { z } from "zod";

  export const formSchema = z.object({
    type: z.enum(["all", "mentions", "none"], {
      required_error: "You need to select a notification type"
    })
  });
  export type FormSchema = typeof formSchema;
</script>

<script lang="ts">
  import { page } from "$app/stores";
  import * as Form from "$lib/components/ui/form";
  // Since the labels used in each radio item don't represent the field
  // we need to use a regular label component instead of Form.Label
  import { Label } from "$lib/components/ui/label";
  import type { SuperValidated } from "sveltekit-superforms";
  export let form: SuperValidated<FormSchema> = $page.data.radioGroup;
</script>

<Form.Root
  {form}
  schema={formSchema}
  let:config
  method="POST"
  action="?/radioGroup"
  class="w-2/3 space-y-6"
>
  <Form.Field {config} name="type">
    <Form.Item class="space-y-3">
      <Form.Label>Notify me about...</Form.Label>
      <Form.RadioGroup class="flex flex-col space-y-1">
        <Form.Item class="flex items-center space-x-3 space-y-0">
          <Form.RadioItem value="all" id="all" />
          <Label for="all" class="font-normal">All new messages</Label>
        </Form.Item>
        <Form.Item class="flex items-center space-x-3 space-y-0">
          <Form.RadioItem value="mentions" id="mentions" />
          <Label for="mentions" class="font-normal"
            >Direct messages and mentions</Label
          >
        </Form.Item>
        <Form.Item class="flex items-center space-x-3 space-y-0">
          <Form.RadioItem value="none" id="none" />
          <Label for="none" class="font-normal">Nothing</Label>
        </Form.Item>
      </Form.RadioGroup>
      <Form.Validation />
    </Form.Item>
  </Form.Field>
  <Form.Button>Submit</Form.Button>
</Form.Root>

	<script lang="ts" context="module">
  import { z } from "zod";

  export const formSchema = z.object({
    type: z.enum(["all", "mentions", "none"], {
      required_error: "You need to select a notification type"
    })
  });
  export type FormSchema = typeof formSchema;
</script>

<script lang="ts">
  import { page } from "$app/stores";
  import * as Form from "$lib/components/ui/form";
  // Since the labels used in each radio item don't represent the field
  // we need to use a regular label component instead of Form.Label
  import { Label } from "$lib/components/ui/label";
  import type { SuperValidated } from "sveltekit-superforms";
  export let form: SuperValidated<FormSchema> = $page.data.radioGroup;
</script>

<Form.Root
  {form}
  schema={formSchema}
  let:config
  method="POST"
  action="?/radioGroup"
  class="w-2/3 space-y-6"
>
  <Form.Field {config} name="type">
    <Form.Item class="space-y-3">
      <Form.Label>Notify me about...</Form.Label>
      <Form.RadioGroup class="flex flex-col space-y-1">
        <Form.Item class="flex items-center space-x-3 space-y-0">
          <Form.RadioItem value="all" id="all" />
          <Label for="all" class="font-normal">All new messages</Label>
        </Form.Item>
        <Form.Item class="flex items-center space-x-3 space-y-0">
          <Form.RadioItem value="mentions" id="mentions" />
          <Label for="mentions" class="font-normal"
            >Direct messages and mentions</Label
          >
        </Form.Item>
        <Form.Item class="flex items-center space-x-3 space-y-0">
          <Form.RadioItem value="none" id="none" />
          <Label for="none" class="font-normal">Nothing</Label>
        </Form.Item>
      </Form.RadioGroup>
      <Form.Validation />
    </Form.Item>
  </Form.Field>
  <Form.Button>Submit</Form.Button>
</Form.Root>

Progress Select

On This Page