Choicebox

import { Choicebox } from '@hanzo/ui'

export function Default() {
  return (
    <YStack maxW={420} width="100%">
      <Choicebox options={plans} defaultValue="team" />
    </YStack>
  )
}

export function Multiple() {
  const notifications = [
    { value: "email", label: "Email", description: "A digest every morning." },
    { value: "push", label: "Push", description: "As soon as it happens." },
    { value: "sms", label: "SMS", description: "Only for incidents." },
  ]
  return (
    <YStack maxW={420} width="100%">
      <Choicebox options={notifications} defaultValue="email,push" multiple />
    </YStack>
  )
}

export function Controlled() {
  const [plan, setPlan] = useState("starter")
  return (
    <YStack gap="$3" maxW={420} width="100%">
      <Choicebox options={plans} value={plan} onChange={setPlan} />
      <Paragraph color="$quiet">You picked {plan}.</Paragraph>
    </YStack>
  )
}

export function LabelOnly() {
  const sizes = [
    { value: "s", label: "Small" },
    { value: "m", label: "Medium" },
    { value: "l", label: "Large" },
  ]
  return (
    <YStack maxW={280} width="100%">
      <Choicebox options={sizes} defaultValue="m" />
    </YStack>
  )
}

Types

export type ChoiceboxOption = {
  value: string
  label: ReactNode
  description?: ReactNode
}

export type ChoiceboxProps = Omit<
  ComponentProps<typeof GuiToggleGroup>,
  'type' | 'value' | 'defaultValue' | 'onValueChange' | 'onChange' | 'children'
> & {
  options: ChoiceboxOption[]
  value?: string
  defaultValue?: string
  onChange?: (value: string) => void
  multiple?: boolean
}

Exports