Grapes homepage1.57.0
  • Guide
  • Tokens
  • Components
    Grapes on GithubGrapes on Figma
    Interaction
    • Button
    • IconButton
    • FloatingActionBar
    • Link
    Icons
    • Icon
    • HighlightIcon
    Form
    • AmountInput
    • Autocomplete
    • AutocompleteMultiple
    • AutocompletePlace
    • CheckboxBox
    • CheckboxField
    • DatePicker
    • FormField
    • Input
    • OptionGroup
    • PasswordInput
    • PhoneInput
    • RadioBox
    • RadioField
    • RadioGroup
    • Select
    • SwitchField
    • TextArea
    • TextInput
    • Upload
    • UploadButton
    Feedback
    • Badge
    • Banner
    • Callout
    • EmptyState
    • Modal
    • ModalSlideshow
    • DeprecatedModalSlideshow
    • PageModal
    • Skeleton
    • Tag
    • Toast
    • Tooltip
    Data display
    • Accordion
    • Avatar
    • Box
    • Calendar
    • CalendarRange
    • CollapsibleList
    • FileCard
    • InfoTip
    • ListBox
    • ListView
    • Panel
    • SidePanel
    • DeprecatedPreview
    • Table
    • Timeline
    • useDateFormatter
    Navigation
    • DropdownItem
    • DropdownMenu
    • Navigation
    • NavigationItem
    • Popover
    • Tabs

    OptionGroup

    OptionGroup allows the user to select one item from a restrictedcollection (usually 3 to 5 items).

    View source code
    • Usage
    • Props
    • Accessibility
    • name
      string

      The name of the OptionGroup

    • options
      { label: string; value: K; iconName?: "adjustments-horizontal" | "archive" | "arrow-down-tray" | "arrow-down" | "arrow-left-right" | "arrow-left" | "arrow-path" | "arrow-pointing-out" | ... 150 more ... | "wrench"; }[]

      Options contained within the OptionGroup * If the key iconName is provided then the associated icon will be displayed instead of the label (and in this case the label will be used as an accessible attribute to describe the icon)

    • value
      string | boolean

      The current value

    • className
      string

      className for the element

    • isDisabled
      boolean

      Whether the OptionGroup should be disabled.

      Default: false
    • isInvalid
      boolean

      Whether the OptionGroup is invalid.

    • onChange
      ChangeEventHandler<HTMLInputElement>

      Handler that is called when the value changes.