SEED Design
Select Box

Radio Select Box

라디오 버튼 형태로 하나의 옵션만 선택할 수 있는 드롭다운 컴포넌트입니다. 단일 선택이 필요한 설정이나 필터에서 사용됩니다.

import { VStack } from "@seed-design/react";
import { RadioSelectBoxItem, RadioSelectBoxRoot } from "seed-design/ui/select-box";

export default function RadioSelectBoxPreview() {
  return (
    <RadioSelectBoxRoot defaultValue="apple" aria-label="Fruit">
      <VStack gap="spacingY.componentDefault">
        <RadioSelectBoxItem value="apple" label="Apple" />
        <RadioSelectBoxItem
          value="melon"
          label="Melon"
          description="Elit cupidatat dolore fugiat enim veniam culpa."
        />
        <RadioSelectBoxItem value="mango" label="Mango" />
      </VStack>
    </RadioSelectBoxRoot>
  );
}

Installation

npx @seed-design/cli@latest add ui:select-box

Props

RadioSelectBoxRoot

Prop

Type

RadioSelectBoxItem

Prop

Type

Examples

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 { RadioSelectBoxItem, RadioSelectBoxRoot } from "seed-design/ui/select-box";

const POSSIBLE_FRUIT_VALUES = ["apple", "melon", "mango"] as const;

interface FormValues {
  fruit: (typeof POSSIBLE_FRUIT_VALUES)[number];
}

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

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

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

  return (
    <VStack gap="x3" width="full" as="form" onSubmit={handleSubmit(onValid)} onReset={onReset}>
      <RadioSelectBoxRoot aria-label="Fruit" {...field}>
        <VStack gap="spacingY.componentDefault">
          {POSSIBLE_FRUIT_VALUES.map((value) => (
            <RadioSelectBoxItem key={value} value={value} label={value} />
          ))}
        </VStack>
      </RadioSelectBoxRoot>
      <HStack gap="x2">
        <ActionButton type="reset" variant="neutralWeak">
          초기화
        </ActionButton>
        <ActionButton
          type="button"
          variant="neutralWeak"
          onClick={() => setValue("fruit", "mango")}
        >
          mango 선택
        </ActionButton>
        <ActionButton type="submit" variant="neutralSolid" flexGrow={1}>
          제출
        </ActionButton>
      </HStack>
    </VStack>
  );
}

Customizing Label

import { Badge, Box, Flex, VStack } from "@seed-design/react";
import { RadioSelectBoxItem, RadioSelectBoxRoot } from "seed-design/ui/select-box";

export default function RadioSelectBoxCustomizingLabel() {
  return (
    <RadioSelectBoxRoot defaultValue="apple" aria-label="Fruit">
      <VStack gap="spacingY.componentDefault">
        <RadioSelectBoxItem value="apple" label="Apple" />
        <RadioSelectBoxItem
          value="melon"
          label={
            <Flex gap="x1_5" alignItems="center">
              <Box>Melon</Box>
              <Badge tone="brand" variant="solid">
                New
              </Badge>
            </Flex>
          }
          description="Elit cupidatat dolore fugiat enim veniam culpa."
        />
        <RadioSelectBoxItem
          value="mango"
          label="Mango"
          description="Aliqua ad aute eiusmod eiusmod nulla adipisicing proident ullamco in."
        />
      </VStack>
    </RadioSelectBoxRoot>
  );
}

Listening to Value Changes

RadioSelectBoxRoot의 onValueChange를 사용하여 라디오 버튼의 선택 값 변경을 감지할 수 있습니다.

이벤트를 활용해야 하는 경우 RadioSelectBoxItem의 inputProps를 통해 내부 <input> 요소에 직접 이벤트 핸들러를 추가할 수 있습니다.

import { VStack, Text } from "@seed-design/react";
import { RadioSelectBoxItem, RadioSelectBoxRoot } from "seed-design/ui/select-box";
import { useState } from "react";

export default function RadioSelectBoxValueChanges() {
  const [count, setCount] = useState(0);
  const [lastValue, setLastValue] = useState<string | null>(null);

  return (
    <VStack gap="x4" align="center">
      <RadioSelectBoxRoot
        defaultValue="apple"
        aria-label="Fruit"
        onValueChange={(value) => {
          setCount((prev) => prev + 1);
          setLastValue(value);
        }}
      >
        <VStack gap="spacingY.componentDefault">
          <RadioSelectBoxItem value="apple" label="Apple" />
          <RadioSelectBoxItem value="banana" label="Banana" />
        </VStack>
      </RadioSelectBoxRoot>
      <Text>
        onValueChange called: {count} times, last value: {lastValue ?? "-"}
      </Text>
    </VStack>
  );
}

Last updated on

On this page

Installation
Props
RadioSelectBoxRoot
RadioSelectBoxItem
Examples
React Hook Form
Customizing Label
Listening to Value Changes