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

    RadioGroup

    The radio group component is the preferred way to display multiple radio fields.

    View source code
    • Usage
    • Props

    Basic usage

    const options: {
      value: string;
      label: string;
      isDisabled?: boolean;
    }[] = [
      { value: "daily", label: "Daily" },
      { value: "weekly", label: "Weekly" },
      { value: "yearly", label: "Yearly" },
    ];
    
    const Demo = () => {
      const [selectedValue, setSelectedValue] = useState<string | null>(null);
    
      const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
        setSelectedValue(event.target.value);
      };
    
      return (
        <RadioGroup
          name="myRadioGroup"
          value={selectedValue}
          onChange={handleChange}
          direction="row"
        >
          {options.map((props) => (
            <RadioField {...props} key={props.value} />
          ))}
        </RadioGroup>
      );
    };
    

    Column

    The direction prop is used to specify the axis the radio buttons should align with.

    <RadioGroup direction="column" {...otherProps} />