Skip to main content

​
SpecialInstructions

A text area input that allows customers to add special instructions or notes to a menu item (e.g., “no onions”, “extra sauce on the side”).

​
Preview

View in Storybook

​
Import

import { SpecialInstructions } from '@/components/SpecialInstructions'

​
Usage

<SpecialInstructions
  value={instructions}
  onChange={setInstructions}
  placeholder="Add special instructions..."
/>

​
Props

​
value
string
required
The current instructions text.
​
onChange
(value: string) => void
required
Callback fired when the text changes.
​
placeholder
string
default:"Special instructions..."
Placeholder text shown when the input is empty.
​
maxLength
number
default:"250"
Maximum character limit for the instructions.

​
Behavior

  • Character counter displayed when approaching the limit
  • Expandable text area that grows with content
  • Optional — collapses to a single-line prompt when empty