SEED Design

Radio Group

Radio Group 컴포넌트는 사용자가 여러 옵션 중 하나를 선택할 수 있도록 합니다.

import { VStack } from "@seed-design/react";
import { RadioGroup, RadioGroupItem } from "seed-design/ui/radio-group";

export default function RadioGroupPreview() {
  return (
    <RadioGroup defaultValue="apple" aria-label="Fruit selection">
      <VStack>
        <RadioGroupItem value="apple" label="Apple" />
        <RadioGroupItem value="banana" label="Banana" />
        <RadioGroupItem value="orange" label="Orange" />
      </VStack>
    </RadioGroup>
  );
}

Installation

npx @seed-design/cli@latest add ui:radio-group

Props

RadioGroup

Prop

Type

RadioGroupItem

Prop

Type

RadioMark

Prop

Type

Examples

Sizes

import { RadioGroup, RadioGroupItem } from "seed-design/ui/radio-group";
import { VStack, HStack } from "@seed-design/react";

export default function RadioGroupSize() {
  return (
    <VStack gap="x5">
      <RadioGroup defaultValue="apple" aria-label="과일 선택">
        <HStack gap="x3">
          <RadioGroupItem value="apple" label="사과" size="medium" />
          <RadioGroupItem value="banana" label="바나나" size="medium" />
          <RadioGroupItem value="orange" label="오렌지" size="medium" />
        </HStack>
      </RadioGroup>
      <RadioGroup defaultValue="red" aria-label="색상 선택">
        <HStack gap="x3">
          <RadioGroupItem value="red" label="빨간색" size="large" />
          <RadioGroupItem value="blue" label="파란색" size="large" />
          <RadioGroupItem value="green" label="초록색" size="large" />
        </HStack>
      </RadioGroup>
    </VStack>
  );
}

Tones

Brand

import { RadioGroup, RadioGroupItem } from "seed-design/ui/radio-group";
import { HStack } from "@seed-design/react";

export default function RadioGroupBrand() {
  return (
    <RadioGroup defaultValue="apple" aria-label="과일 선택">
      <HStack gap="x3">
        <RadioGroupItem value="apple" label="사과" tone="brand" />
        <RadioGroupItem value="banana" label="바나나" tone="brand" />
        <RadioGroupItem value="orange" label="오렌지" tone="brand" />
      </HStack>
    </RadioGroup>
  );
}

Neutral

import { RadioGroup, RadioGroupItem } from "seed-design/ui/radio-group";
import { HStack } from "@seed-design/react";

export default function RadioGroupNeutral() {
  return (
    <RadioGroup defaultValue="apple" aria-label="과일 선택">
      <HStack gap="x3">
        <RadioGroupItem value="apple" label="사과" tone="neutral" />
        <RadioGroupItem value="banana" label="바나나" tone="neutral" />
        <RadioGroupItem value="orange" label="오렌지" tone="neutral" />
      </HStack>
    </RadioGroup>
  );
}

Weights

import { RadioGroup, RadioGroupItem } from "seed-design/ui/radio-group";
import { HStack } from "@seed-design/react";

export default function RadioGroupWeights() {
  return (
    <RadioGroup defaultValue="regular" aria-label="글꼴 굵기 선택">
      <HStack gap="x3">
        <RadioGroupItem value="regular" label="Regular" weight="regular" />
        <RadioGroupItem value="bold" label="Bold" weight="bold" />
      </HStack>
    </RadioGroup>
  );
}

Long Label

import { VStack } from "@seed-design/react";
import { RadioGroup, RadioGroupItem } from "seed-design/ui/radio-group";

export default function RadioGroupLongLabel() {
  return (
    <VStack gap="x2">
      <RadioGroup defaultValue="medium">
        <RadioGroupItem
          value="medium"
          size="medium"
          label="Consequat ut veniam aliqua deserunt occaecat enim occaecat veniam et et cillum nulla officia incididunt incididunt. Sint laboris labore occaecat fugiat culpa voluptate ullamco in elit dolore exercitation nulla."
        />
        <RadioGroupItem
          value="large"
          size="large"
          label="Consequat ut veniam aliqua deserunt occaecat enim occaecat veniam et et cillum nulla officia incididunt incididunt. Sint laboris labore occaecat fugiat culpa voluptate ullamco in elit dolore exercitation nulla."
        />
      </RadioGroup>
    </VStack>
  );
}

Disabled

import { VStack } from "@seed-design/react";
import { RadioGroup, RadioGroupItem } from "seed-design/ui/radio-group";

export default function RadioGroupDisabled() {
  return (
    <RadioGroup defaultValue="option1" aria-label="Options with disabled">
      <VStack>
        <RadioGroupItem value="option1" label="Active option" />
        <RadioGroupItem value="option2" label="Disabled option" disabled />
        <RadioGroupItem value="option3" label="Another active option" />
      </VStack>
    </RadioGroup>
  );
}

Use Cases

React Hook Form

import { HStack, VStack } from "@seed-design/react";
import { useCallback, type FormEvent } from "react";
import { useController, useForm } from "react-hook-form";
import { ActionButton } from "seed-design/ui/action-button";
import { RadioGroup, RadioGroupItem } from "seed-design/ui/radio-group";

const POSSIBLE_COLORS = ["red", "blue", "green"] as const;

interface FormValues {
  color: (typeof POSSIBLE_COLORS)[number];
}

export default function RadioGroupReactHookForm() {
  const { handleSubmit, reset, setValue, control } = useForm<FormValues>({
    defaultValues: {
      color: "blue",
    },
  });
  const { field } = useController({ name: "color", control });

  const onValid = useCallback((data: FormValues) => {
    window.alert(JSON.stringify(data, null, 2));
  }, []);

  const onReset = useCallback(
    (event: FormEvent) => {
      event.preventDefault();
      reset();
    },
    [reset],
  );

  return (
    <form onSubmit={handleSubmit(onValid)}>
      <VStack gap="x3">
        <RadioGroup
          value={field.value}
          onValueChange={(value) => setValue("color", value as FormValues["color"])}
          aria-label="Color selection"
        >
          <VStack>
            {POSSIBLE_COLORS.map((color) => (
              <RadioGroupItem
                key={color}
                value={color}
                label={color.charAt(0).toUpperCase() + color.slice(1)}
              />
            ))}
          </VStack>
        </RadioGroup>

        <HStack gap="x3">
          <ActionButton type="submit">Submit</ActionButton>
          <ActionButton variant="neutralWeak" onClick={onReset}>
            Reset
          </ActionButton>
        </HStack>
      </VStack>
    </form>
  );
}

Layout of RadioGroupItem

RadioGroup은 여러 옵션 중 하나만 선택할 수 있는 컴포넌트입니다. 각 옵션은 RadioGroupItem으로 구성됩니다.

RadioGroup은 기본적으로 레이아웃을 제공하지 않습니다. HStack 또는 VStack과 같은 레이아웃 컴포넌트와 함께 사용해야 합니다.

import { RadioGroup, RadioGroupItem } from "seed-design/ui/radio-group";

function HorizontalRadioGroup() {
  const [value, setValue] = useState("option1");

  return (
    <RadioGroup value={value} onValueChange={setValue} aria-label="Options">
      <HStack gap="x3">
        <RadioGroupItem value="option1" label="첫 번째 옵션" />
        <RadioGroupItem value="option2" label="두 번째 옵션" />
        <RadioGroupItem value="option3" label="세 번째 옵션" />
      </HStack>
    </RadioGroup>
  );
}

function VerticalRadioGroup() {
  const [value, setValue] = useState("option1");

  return (
    <RadioGroup value={value} onValueChange={setValue} aria-label="Options">
      <VStack>
        <RadioGroupItem value="option1" label="첫 번째 옵션" />
        <RadioGroupItem value="option2" label="두 번째 옵션" />
        <RadioGroupItem value="option3" label="세 번째 옵션" />
      </VStack>
    </RadioGroup>
  );
}

Using RadioMark

RadioMark는 독립적인 라디오 마크 컴포넌트로, 커스텀 레이아웃을 위해 사용할 수 있습니다.

import { HStack, Text, VStack } from "@seed-design/react";
import { RadioMark } from "seed-design/ui/radio-group";
import { RadioGroup } from "@seed-design/react/primitive";

function CustomRadioGroupItem({ children, ...props }: RadioGroup.ItemProps) {
  return (
    <VStack asChild gap="x2" align="center">
      <RadioGroup.Item {...props}>
        <RadioMark />
        <RadioGroup.ItemHiddenInput />
        {children}
      </RadioGroup.Item>
    </VStack>
  );
}

export default function RadioGroupRadioMark() {
  return (
    <RadioGroup.Root defaultValue="medium" aria-label="Weight selection">
      <HStack gap="x6">
        <CustomRadioGroupItem value="regular">
          <Text textStyle="t7Regular">regular</Text>
        </CustomRadioGroupItem>
        <CustomRadioGroupItem value="medium">
          <Text textStyle="t7Medium">medium</Text>
        </CustomRadioGroupItem>
        <CustomRadioGroupItem value="bold">
          <Text textStyle="t7Bold">bold</Text>
        </CustomRadioGroupItem>
      </HStack>
    </RadioGroup.Root>
  );
}

Last updated on

On this page

Installation
Props
RadioGroup
RadioGroupItem
RadioMark
Examples
Sizes
Tones
Brand
Neutral
Weights
Long Label
Disabled
Use Cases
React Hook Form
Layout of RadioGroupItem
Using RadioMark