Settings List

라벨과 스위치를 구분선으로 나눈 설정 목록 카드입니다.

@horon-ai/react 표시

Preview

Keep working after I close the laptopRuns continue on your other devices.

Ask before sending emailDrafts wait for your approval.

Share usage with the team

Quick commandOpen the command palette from anywhere.

⌘K

Disabled optionManaged by your workspace admin.

Usage

tsx

import { SettingsKey, SettingsKeys, SettingsList, SettingsRow, SettingsSwitch } from "@horon-ai/react";

export default function SettingsListDemo() {
  return (
    <>
      <SettingsList className="w-full max-w-120">
        <SettingsRow
          title="Keep working after I close the laptop"
          description="Runs continue on your other devices."
          control={<SettingsSwitch defaultChecked aria-label="Keep working" />}
        />
        <SettingsRow
          title="Ask before sending email"
          description="Drafts wait for your approval."
          control={<SettingsSwitch defaultChecked aria-label="Ask before sending" />}
        />
        <SettingsRow title="Share usage with the team" control={<SettingsSwitch aria-label="Share usage" />} />
        <SettingsRow
          title="Quick command"
          description="Open the command palette from anywhere."
          control={
            <SettingsKeys>
              <SettingsKey>⌘</SettingsKey>
              <SettingsKey>K</SettingsKey>
            </SettingsKeys>
          }
        />
        <SettingsRow
          title="Disabled option"
          description="Managed by your workspace admin."
          control={<SettingsSwitch disabled aria-label="Disabled" />}
        />
      </SettingsList>
    </>
  );
}