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가 지정되지 않은 경우 RadioGroupFieldsize 속성 값이 사용됩니다.
labelstring라디오의 라벨
descriptionstring라디오의 설명
directionhorizontal | verticalvertical라디오의 방향. direction을 지정하면 label 혹은 description이 지정되어야 합니다.
tabIndex0 | -1탭 포커스의 도달 순서 지정

useRadio

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

Usage

크기

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

Loading...

비활성화

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

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}
rounded='lg'
>
<>
<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