Component

SelectableOption

시간·목록 선택에서 재사용하는 작은 option row입니다.

Playground

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

PC 1280px

Controls

Code

import { SelectableOption } from '@amineslab/ui'

export default function ExamplePreview() {
  return ((<SelectableOption {...({"selected":true,"disabled":false,"checkPosition":"end"} as const)} checkPosition={"end"} onSelect={() => undefined}>
        알림 빈도
      </SelectableOption>))
}

Props

@amineslab/ui에서 SelectableOption를 가져옵니다.

import { SelectableOption } from '@amineslab/ui'

`SelectableOption`

선택된 option의 시각·접근성 상태를 맞춥니다.

Name	Type	Default	Description
`selected*`	`boolean`	-	현재 선택 상태입니다.
`onSelect*`	`() => void`	-	선택을 부모로 전달합니다.
`children*`	`ReactNode`	-	option 라벨입니다.
`checkPosition`	`'start' \| 'end'`	`'end'`	확인 아이콘 위치입니다.

Examples

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

Option row

import { SelectableOption } from '@amineslab/ui'

export default function ExamplePreview() {
  return ((<SelectableOption selected onSelect={() => undefined}>
            매일
          </SelectableOption>))
}

사용 기준

권장하는 사용

선택값은 부모가 소유하고 selected와 onSelect를 전달합니다.
trailing check는 선택 상태를 보조하고, option 자체는 메뉴의 row hit area를 소유합니다.

피해야 할 사용

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

접근성

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

Enter / Space: 현재 option을 선택합니다.