Skip to content
Ink
Esc
↑↓navigate↵open⌘Jpreview
On this page

Selection

Choose one option.

Example

import { useState } from "react";
import { Screen, SettingsChoices } from "ink";

export default function Units() {
  const [value, setValue] = useState("metric");

  return <Screen title="Units">
    <SettingsChoices
      value={value}
      onChange={setValue}
      options={[
        { value: "metric", label: "Metric" },
        { value: "imperial", label: "Imperial" },
      ]}
    />
  </Screen>;
}
Metric selected with an underline.
Imperial selected with an underline.

Disabled

Set disabled while an option cannot be changed.

<SettingsChoices options={options} value={value}
  onChange={setValue} disabled />
Both unit choices disabled.

Give each option a unique value. Use save actions to save the choice and return to the previous page.