Component

SelectableCard

선택 상태·키보드 roving focus·카드/칩 표면을 controlled group으로 제공합니다.

Playground

옵션을 조절하며 화면과 사용 코드를 함께 확인하세요.

PC 1280px

Controls

Code

import { useState } from 'react'

import { SelectableGroup, SelectableCard, SelectableChip, SelectableOption } from '@amineslab/ui'

function SelectableExample({ value, disabled = false }: {
    value: string;
    disabled?: boolean;
}) {
    const [selected, setSelected] = useState(value);
    return (<div className="grid w-full gap-3">
      <SelectableGroup value={selected} onValueChange={setSelected} className="grid gap-3 sm:grid-cols-3" aria-label="알림 빈도">
        <SelectableCard value="always" disabled={disabled}>
          <strong className="text-body-1">항상</strong>
          <span className="mt-1 text-body-3 text-text-secondary">모든 알림</span>
        </SelectableCard>
        <SelectableCard value="mentions">
          <strong className="text-body-1">멘션만</strong>
          <span className="mt-1 text-body-3 text-text-secondary">내 이름이 포함된 알림</span>
        </SelectableCard>
        <SelectableCard value="never" disabled>
          <strong className="text-body-1">받지 않기</strong>
          <span className="mt-1 text-body-3 text-text-secondary">현재 정책으로 비활성</span>
        </SelectableCard>
      </SelectableGroup>
      <SelectableGroup value={selected} onValueChange={setSelected} className="flex flex-wrap gap-2" aria-label="알림 빈도 chip">
        <SelectableChip value="always" size="sm">
          항상
        </SelectableChip>
        <SelectableChip value="mentions" size="sm">
          멘션만
        </SelectableChip>
      </SelectableGroup>
      <SelectableOption selected={selected === 'always'} onSelect={() => setSelected('always')}>
        작은 option
      </SelectableOption>
    </div>);
}

export default function ExamplePreview() {
  return (<SelectableExample key={"always"} {...({"value":"always","disabled":false} as const)}/>)
}

Props

import {
  SelectableGroup,
  SelectableCard,
  SelectableChip,
  nextSelectableValue,
} from '@amineslab/ui'

`SelectableGroup`

radiogroup/checkbox group의 선택 상태와 키보드 이동을 관리합니다.

Name	Type	Default	Description
`value / defaultValue / onValueChange`	`string / (value: string) => void`	-	controlled 또는 uncontrolled 선택값입니다.
`disabled`	`boolean`	`false`	그룹 안의 모든 항목을 비활성화합니다.

`SelectableCard / SelectableChip`

group context에 연결되는 선택 항목입니다.

Name	Type	Default	Description
`value*`	`string`	-	항목 식별자입니다.
`disabled`	`boolean`	`false`	선택과 포커스를 막습니다.
`size / className`	`'sm' \| 'md' \| 'lg' / string`	-	항목 밀도와 공개 스타일입니다.

Examples

자주 쓰는 조합을 살펴보고, 필요한 예시의 코드를 펼쳐 확인하세요.

Chip variant

import { useState } from 'react'

import { SelectableGroup, SelectableCard, SelectableChip, SelectableOption } from '@amineslab/ui'

function SelectableExample({ value, disabled = false }: {
    value: string;
    disabled?: boolean;
}) {
    const [selected, setSelected] = useState(value);
    return (<div className="grid w-full gap-3">
      <SelectableGroup value={selected} onValueChange={setSelected} className="grid gap-3 sm:grid-cols-3" aria-label="알림 빈도">
        <SelectableCard value="always" disabled={disabled}>
          <strong className="text-body-1">항상</strong>
          <span className="mt-1 text-body-3 text-text-secondary">모든 알림</span>
        </SelectableCard>
        <SelectableCard value="mentions">
          <strong className="text-body-1">멘션만</strong>
          <span className="mt-1 text-body-3 text-text-secondary">내 이름이 포함된 알림</span>
        </SelectableCard>
        <SelectableCard value="never" disabled>
          <strong className="text-body-1">받지 않기</strong>
          <span className="mt-1 text-body-3 text-text-secondary">현재 정책으로 비활성</span>
        </SelectableCard>
      </SelectableGroup>
      <SelectableGroup value={selected} onValueChange={setSelected} className="flex flex-wrap gap-2" aria-label="알림 빈도 chip">
        <SelectableChip value="always" size="sm">
          항상
        </SelectableChip>
        <SelectableChip value="mentions" size="sm">
          멘션만
        </SelectableChip>
      </SelectableGroup>
      <SelectableOption selected={selected === 'always'} onSelect={() => setSelected('always')}>
        작은 option
      </SelectableOption>
    </div>);
}

export default function ExamplePreview() {
  return (<SelectableExample value="mentions"/>)
}

사용 기준

권장하는 사용

단일 선택은 SelectableGroup type="single", 여러 선택은 multiple을 사용합니다.
카드 내부의 보조 작업은 선택 트리거와 분리해 포커스 순서를 명확하게 유지합니다.

피해야 할 사용

겉모양만으로 사용을 결정하지 마세요.
의미와 키보드 동작, 모바일에서의 흐름을 함께 확인하세요.

접근성

화면에 맞는 이름을 제공하고, 키보드만으로 작업을 마칠 수 있는지 확인하세요.

Arrow Up / Down / Left / Right: 그룹 방향에 따라 다음 선택 항목으로 이동합니다.
Space: 현재 항목을 선택합니다.