Modifier Picker

Installation#

# One-time setup (tokens + lib helpers)
npx koalaui-cli@latest init

# Activate your Pro license (once per machine)
npx koalaui-cli@latest login <key>

# Add this component (its dependencies come along)
npx koalaui-cli@latest add modifier-picker

Usage#

Open it in a Sheet or a Dialog from a Menu Grid tile. Read the choices and the total from onSubmit, or call useModifierPicker() inside it for a footer of your own.

Anatomy#

import {
  ModifierGroup,
  ModifierGroupHeader,
  ModifierGroupRule,
  ModifierGroupTitle,
  ModifierOption,
  ModifierOptionLabel,
  ModifierOptionMedia,
  ModifierOptions,
  ModifierPicker,
  ModifierPickerFooter,
  ModifierPickerSubmit,
  ModifierPickerTotal,
} from "@/components/ui/modifier-picker"

<ModifierPicker>
  <ModifierGroup>
    <ModifierGroupHeader>
      <ModifierGroupTitle />
      <ModifierGroupRule />
    </ModifierGroupHeader>
    <ModifierOptions>
      <ModifierOption>
        <ModifierOptionMedia />
        <ModifierOptionLabel />
      </ModifierOption>
    </ModifierOptions>
  </ModifierGroup>
  <ModifierPickerFooter>
    <ModifierPickerTotal />
    <ModifierPickerSubmit />
  </ModifierPickerFooter>
</ModifierPicker>

Pictures, illustrations and icons#

A cook reads a cut of steak faster than the word “medium”. Put an illustration, a photo or an icon in ModifierOptionMedia and the option becomes a card, with its price as a tag on the picture. Groups without media stay compact, so a list of removals can sit under a row of pictures.

Rules#

A type="single" group takes one option. A multiple group takes any number between min and max, and refuses a tap past the limit with a shake instead of greying options out. Leave out required and a single choice can be tapped off again. The rule line writes itself.

Leaving things out#

variant="remove" is for what the guest does not want. A chosen option gets a cross and is struck through, so the kitchen reads it as a removal at a glance.

Touch density#

Inside the touch density every option grows to 64px and the copy to 16px, with no props.

Translated labels#

The rule line and the submit label come from LabelsProvider, with Spanish included. Pass children to either to write your own.

API reference#

FAQ#