Reddot UI Library

Docs
Radio Group

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.

Installation

$npx shadcn@latest add https://reddot.dottools.xyz/r/radio-group.json

Utilisation

import { Label } from "@/components/ui/label"
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"
 
export function RadioGroupDemo() {
  return (
    <RadioGroup defaultValue="option-one">
      <div className="flex items-center space-x-2">
        <RadioGroupItem value="option-one" id="option-one" />
        <Label htmlFor="option-one">Option One</Label>
      </div>
      <div className="flex items-center space-x-2">
        <RadioGroupItem value="option-two" id="option-two" />
        <Label htmlFor="option-two">Option Two</Label>
      </div>
    </RadioGroup>
  )
}

Exemple : Intégration avec Form

"use client"
 
import { zodResolver } from "@hookform/resolvers/zod"
import { useForm } from "react-hook-form"
import { toast } from "sonner"
import { z } from "zod"
 
import { Button } from "@/components/ui/button"
import {
  Form,
  FormControl,
  FormField,
  FormItem,
  FormLabel,
  FormMessage,
} from "@/components/ui/form"
import {
  RadioGroup,
  RadioGroupItem,
} from "@/components/ui/radio-group"
 
const FormSchema = z.object({
  type: z.enum(["all", "mentions", "none"], {
    required_error: "Vous devez sélectionner un type de notification.",
  }),
})
 
export function RadioGroupForm() {
  const form = useForm<z.infer<typeof FormSchema>>({
    resolver: zodResolver(FormSchema),
  })
 
  function onSubmit(data: z.infer<typeof FormSchema>) {
    toast("Vous avez soumis les valeurs suivantes", {
      description: (
        <pre className="mt-2 w-[340px] rounded-md bg-slate-950 p-4">
          <code className="text-white">{JSON.stringify(data, null, 2)}</code>
        </pre>
      ),
    })
  }
 
  return (
    <Form {...form}>
      <form onSubmit={form.handleSubmit(onSubmit)} className="w-2/3 space-y-6">
        <FormField
          control={form.control}
          name="type"
          render={({ field }) => (
            <FormItem className="space-y-3">
              <FormLabel>Notifiez-moi de...</FormLabel>
              <FormControl>
                <RadioGroup
                  onValueChange={field.onChange}
                  defaultValue={field.value}
                  className="flex flex-col space-y-1"
                >
                  <FormItem className="flex items-center space-x-3 space-y-0">
                    <FormControl>
                      <RadioGroupItem value="all" />
                    </FormControl>
                    <FormLabel className="font-normal">
                      Tous les nouveaux messages
                    </FormLabel>
                  </FormItem>
                  <FormItem className="flex items-center space-x-3 space-y-0">
                    <FormControl>
                      <RadioGroupItem value="mentions" />
                    </FormControl>
                    <FormLabel className="font-normal">
                      Messages directs et mentions
                    </FormLabel>
                  </FormItem>
                  <FormItem className="flex items-center space-x-3 space-y-0">
                    <FormControl>
                      <RadioGroupItem value="none" />
                    </FormControl>
                    <FormLabel className="font-normal">Rien</FormLabel>
                  </FormItem>
                </RadioGroup>
              </FormControl>
              <FormMessage />
            </FormItem>
          )}
        />
        <Button type="submit">Soumettre</Button>
      </form>
    </Form>
  )
}

API Reference

RadioGroup

Contient tous les éléments d'un groupe radio.

PropTypeDefaultDescription
defaultValuestring-La valeur de l'élément qui doit être sélectionné lors du rendu initial.
valuestring-La valeur contrôlée de l'élément radio à sélectionner.
onValueChange(value: string) => void-Gestionnaire d'événement appelé lorsque la valeur change.
disabledbooleanfalseQuand true, empêche l'utilisateur d'interagir avec les éléments radio.
namestring-Le nom du groupe. Soumis avec son valeur associée lors de la soumission d'un formulaire.
requiredbooleanfalseQuand true, indique que l'utilisateur doit sélectionner une valeur avant de pouvoir soumettre le formulaire propriétaire.
orientation"horizontal" | "vertical""vertical"L'orientation du composant.
dir"ltr" | "rtl"-La direction de lecture du groupe radio.
loopbooleantrueQuand true, la navigation au clavier bouclera du dernier élément au premier, et vice versa.

RadioGroupItem

Un élément dans le groupe. Doit être rendu à l'intérieur d'un RadioGroup.

PropTypeDefaultDescription
valuestring-La valeur donnée comme données lorsque sélectionnée.
disabledbooleanfalseQuand true, empêche l'utilisateur d'interagir avec l'élément.
requiredbooleanfalseQuand true, indique que l'utilisateur doit vérifier l'élément avant de pouvoir soumettre le formulaire propriétaire.

Références