Variant Picker
InputSingle-select product-option swatches (grind, size, color) with selected + out-of-stock states.
Variant PickerInput · Web
Loading Storybook preview…
Installation
bun add @otfdashkit/ui
Usage
Import VariantPicker from @otfdashkit/ui.
Code
// Variant Picker — Single-select product-option swatches (grind, size, color) with selected + out-of-stock states.
//
// Install:
// bun add @otfdashkit/ui
import { VariantPicker } from '@otfdashkit/ui'
export function Example() {
return (
<VariantPicker>
{/* your content */}
</VariantPicker>
)
}Props
Props declared in the VariantPicker source. Inherited HTML attributes are not listed.
| Prop | Type | Default | Description |
|---|---|---|---|
| optionsrequired | VariantOption[] | ||
| defaultValue | string | (readonly string[] & string) | Uncontrolled initial value. | |
| label | string | Group label, e.g. "Grind" or "Size". | |
| onValueChange | (value: string) => void | ||
| value | string | Controlled selected value. |