Garden 9 is now available.
The website has been updated to the latest major version. View previous versions
Skip to main content
Content
Design
Components
Patterns
    • Introduction
      • Overview
    • Foundations
      • Bedrock CSS
      • Design tokens
      • Containers
      • Theming
      • Versions
    • Components
      • Accordion
      • Anchor
      • Avatar
      • Breadcrumbs
      • Buttons
      • Chrome
      • Code block
      • Color picker
      • Color swatch
      • Date picker
      • Draggable
      • Drawer
      • Forms
        • Checkbox
        • Combobox
        • File upload
        • Input
        • Input group
        • Radio
        • Range
        • Select
        • Textarea
        • Toggle
      • Grid
      • Loaders
      • Menu
      • Modal
      • Notification
      • Pagination
      • Pane
      • Sheet
      • Status indicator
      • Stepper
      • Table
      • Tabs
      • Tags
      • Tiles
      • Timeline
      • Tooltip
      • Tooltip dialog
      • Typography
      • Well
    Table of Contents
    • How to use it
      • Default
      • Disabled
      • Hidden label
      • Hint text
      • Regular weight label
      • Validation
    • Configuration
    • API
      • Field
      • Fieldset
      • Radio

    Radio

    Radio buttons let users choose a single option among two or more mutually exclusive options.

    Table of Contents
    • How to use it
      • Default
      • Disabled
      • Hidden label
      • Hint text
      • Regular weight label
      • Validation
    • Configuration
    • API
      • Field
      • Fieldset
      • Radio
    Used for this
    • For choices or options that can’t occur at the same time
    • To indicate that two or more options are mutually exclusive
    Not for this
    • If the user can choose more than one option at once, use a Checkbox instead
    • To select from a long list of options, use Combobox instead

    How to use it

    Default

    A Radio’s label is part of its touch target.

    Toggle dark mode
    Set primary hue
    Toggle RTL
    Open in CodeSandbox
    Copy code
    View code

    Disabled

    A disabled Radio prevents user interaction. It doesn’t appear in the tab order, can’t receive focus, and may not read aloud by a screenreader.

    Toggle dark mode
    Set primary hue
    Toggle RTL
    Open in CodeSandbox
    Copy code
    View code

    Hidden label

    Radio labels can be hidden.

    Toggle dark mode
    Set primary hue
    Toggle RTL
    Open in CodeSandbox
    Copy code
    View code

    Hint text

    Hint text adds additional context to a Radio label.

    Toggle dark mode
    Set primary hue
    Toggle RTL
    Open in CodeSandbox
    Copy code
    View code

    Regular weight label

    Radio labels are bold by default, but can be regular weight too.

    Toggle dark mode
    Set primary hue
    Toggle RTL
    Open in CodeSandbox
    Copy code
    View code

    Validation

    Success, warning, and danger validation messages are shown using the Message component.

    Toggle dark mode
    Set primary hue
    Toggle RTL
    Open in CodeSandbox
    Copy code
    View code

    Configuration

    • Name9.1.0•View source•View on npm
    • Installnpm install @zendeskgarden/react-forms
    • Depsnpm install react react-dom styled-components @zendeskgarden/react-theming
    • Importimport { Radio, Field, Fieldset } from '@zendeskgarden/react-forms'

    API

    The Radio component follows this structure:

    <Field>  <Radio>    <Field.Label />    <Field.Hint />  </Radio>  <Message /></Field>

    Field

    A Field provides accessibility attributes to its child Radio field by associating it with the corresponding Field.Label and Field.Hint.

    Field.Hint

    Extends HTMLAttributes<HTMLDivElement>

    Nest the Hint within the Radio component.

    Field.Label

    Extends LabelHTMLAttributes<HTMLLabelElement>

    Nest the Label within the Radio component.

    Prop nameTypeDefaultDescription
    hidden
    		boolean

    Hides the label visually without hiding it from screen readers

    isRegular
    		boolean

    Applies regular (non-bold) font weight

    Field.Message

    Extends HTMLAttributes<HTMLDivElement>

    The Message component applies appropriate icon and styles based on the validation provided. Nest it within a Field component.

    Prop nameTypeDefaultDescription
    validation
    		'success' | 'warning' | 'error'

    Applies validation state styling

    validationLabel
    		string

    Defines the aria-label for the validation icon

    Fieldset

    Extends FieldsetHTMLAttributes<HTMLFieldSetElement>

    The Fieldset component provides styles for grouping child form inputs. Wrap related Field components and a Legend together within a Fieldset component. See validation example usage.

    Prop nameTypeDefaultDescription
    isCompact
    		boolean

    Applies compact styling

    Fieldset.Legend

    Extends HTMLAttributes<HTMLLegendElement>

    Nest a Legend within a Fieldset component.

    Radio

    Extends InputHTMLAttributes<HTMLInputElement>

    Nest a Radio within a Field component.

    Prop nameTypeDefaultDescription
    isCompact
    		boolean

    Applies compact styling

    Garden is the design system by Zendesk.
    BlogGitHubVersions
    © Zendesk 2024