Skip to main content

RadioGroupField

Loading...

How to use​

import {
  RadioGroupField,
  Radio,
} from '@vibrant-ui/components';

Properties​

RadioGroupField​

PropTypeDefaultDescription
namestring그룹 내 라디오 인풋 필드의 name
valuestring선택된 라디오를 지정합니다. 제어 모드로 동작하기 때문에 라디오가 선택됐을 때 onChange로 상태를 업데이트해야 합니다.
defaultValuestring초기에 선택된 라디오를 지정합니다.
onChange(value: string) => void선택된 라디오의 상태가 바뀔 때 호출되는 콜백 함수
disabledboolean그룹 내 라디오의 비활성화 여부
sizesm | mdmd그룹 내 라디오의 크기

Radio​

PropTypeDefaultDescription
valuestring그룹 내에서 라디오를 식별하기 위한 값
checkedstring라디오의 체크 여부
disabledbooleanfalse라디오의 비활성화 여부
sizesm | mdmd라디오의 크기. size가 지정되지 않은 경우 RadioGroupField의 size 속성 값이 사용됩니다.
labelstring라디오의 라벨
descriptionstring라디오의 설명
directionhorizontal | verticalvertical라디오의 방향. direction을 지정하면 label 혹은 description이 지정되어야 합니다.
tabIndex0 | -1탭 포커스의 도달 순서 지정

useRadio​

PropTypeDefaultDescription
valuestring그룹 내에서 라디오를 식별하기 위한 값
checkedstring라디오의 체크 여부
disabledbooleanfalse라디오의 비활성화 여부

Usage​

크기​

Radio는 기본값인 md와 sm 2개의 사이즈를 갖습니다. Radio의 사이즈는RadioGroupField의 size 속성 값을 따르고 size 속성으로 다른 값으로 오버라이드할 수 있습니다.

Loading...

비활성화​

RadioGroupField의 disabled 속성으로 그룹 내 모든 라디오 필드를 비활성화시킬 수 있습니다. 또는 Radio의 disabled 속성으로 개별 라디오의 비활성화 여부를 설정할 수 있습니다.

Loading...

커스텀 라디오​

라디오로 동작하지만 Radio의 디자인을 따르지 않는 라디오 컴포넌트가 필요하다면 useRadio 훅을 사용하여 구현할 수 있습니다. useRadio는 라디오의 체크된 상태나 상태가 바뀌었을 때 호출할 콜백 함수 등을 반환합니다.

const RadioButton = ({
  value,
  label,
}: {
  value: string,
  label: string,
}) => {
  const { name, isChecked, isDisabled, onChange } =
    useRadio({ value });

  const id = useId();

  return (
    <Pressable
      as="span"
      width={100}
      disabled={isDisabled}
      backgroundColor={isChecked ? 'primary' : 'background'}
      p={10}
      borderRadiusLevel={2}
    >
      <>
        <Box
          as="input"
          id={id}
          value={value}
          name={name}
          type="radio"
          checked={isChecked}
          onChange={onChange}
          opacity={0}
          position="absolute"
          top={0}
          left={0}
          width="100%"
          height="100%"
        />
        <Body as="label" level={1} htmlFor={id}>
          {label}
        </Body>
      </>
    </Pressable>
  );
};

<RadioGroupField name="radioGroup">
  <RadioButton value="1" label="First" />
  <RadioButton value="2" label="Second" />
  <RadioButton value="3" label="Third" />
</RadioGroupField>;
Previous
Paper
Next
Ratio