Selection

여러 옵션 중 하나 또는 복수의 값을 선택하는 입력 컴포넌트예요. 선택 상태를 명확하게 전달해요. 모두 Radix 기반 클라이언트 컴포넌트이며 sm·md 크기를 지원해요.

Checkbox

여러 항목을 개별 선택해요. checked="indeterminate" 도 지원해요.

tsx

import { Checkbox } from '@openiot/ui'

<label className="flex items-center gap-2">
  <Checkbox defaultChecked /> 알림 받기
</label>

Radio

하나의 그룹에서 한 값만 선택해요.

Wi-Fi이더넷셀룰러

tsx

import { RadioGroup, RadioGroupItem } from '@openiot/ui'

<RadioGroup defaultValue="wifi">
  <label className="flex items-center gap-2">
    <RadioGroupItem value="wifi" /> Wi-Fi
  </label>
</RadioGroup>

Switch

켜짐/꺼짐을 즉시 전환해요.

자동 업데이트

tsx

import { Switch } from '@openiot/ui'

<label className="flex items-center gap-3">
  <Switch defaultChecked /> 자동 업데이트
</label>

Select

목록에서 한 옵션을 선택해요(Dropdown).

tsx

import { Select, SelectTrigger, SelectValue, SelectContent, SelectItem } from '@openiot/ui'

<Select>
  <SelectTrigger><SelectValue placeholder="디바이스 종류" /></SelectTrigger>
  <SelectContent>
    <SelectItem value="sensor">센서</SelectItem>
  </SelectContent>
</Select>

Slider

최소~최대 사이 값을 조절해요. 단일 값과 범위(thumb 2개)를 지원해요.

tsx

import { Slider } from '@openiot/ui'

<Slider defaultValue={[40]} min={0} max={100} />     {/* 단일 */}
<Slider defaultValue={[25, 75]} min={0} max={100} /> {/* 범위 */}