Radio Group Field

A labeled fieldset of radio options with description and helper or error text.

Basic

Priority

Pick one default priority.

Low

Medium

Recommended.

High

You can change this later.

Show code

import {
  RadioGroupField,
  RadioGroupFieldOption,
} from "@makeplane/propel/components/radio-group-field";

export default function BasicDemo() {
  return (
    <RadioGroupField
      name="priority"
      label="Priority"
      description="Pick one default priority."
      density="comfortable"
      magnitude="md"
      defaultValue="medium"
      hint="You can change this later."
    >
      <RadioGroupFieldOption value="low" label="Low" />
      <RadioGroupFieldOption value="medium" label="Medium" description="Recommended." />
      <RadioGroupFieldOption value="high" label="High" />
    </RadioGroupField>
  );
}

Magnitudes

Legend, description, and option text scale together across md, lg, and xl.

Show code

import {
  RadioGroupField,
  RadioGroupFieldOption,
} from "@makeplane/propel/components/radio-group-field";

export default function MagnitudesDemo() {
  return (
    <div className="flex flex-wrap items-start gap-10">
      {(["md", "lg", "xl"] as const).map((magnitude) => (
        <RadioGroupField
          key={magnitude}
          name={`priority-${magnitude}`}
          label={magnitude}
          description="Pick one default priority."
          density="comfortable"
          magnitude={magnitude}
          defaultValue="medium"
        >
          <RadioGroupFieldOption value="low" label="Low" />
          <RadioGroupFieldOption value="medium" label="Medium" description="Recommended." />
          <RadioGroupFieldOption value="high" label="High" />
        </RadioGroupField>
      ))}
    </div>
  );
}

Densities

density sets the row spacing between options: comfortable keeps a gap, compact stacks them flush.

Show code

import {
  RadioGroupField,
  RadioGroupFieldOption,
} from "@makeplane/propel/components/radio-group-field";

export default function DensitiesDemo() {
  return (
    <div className="flex flex-wrap items-start gap-10">
      {(["comfortable", "compact"] as const).map((density) => (
        <RadioGroupField
          key={density}
          name={`priority-${density}`}
          label={density}
          description="Pick one default priority."
          density={density}
          magnitude="md"
          defaultValue="medium"
        >
          <RadioGroupFieldOption value="low" label="Low" />
          <RadioGroupFieldOption value="medium" label="Medium" description="Recommended." />
          <RadioGroupFieldOption value="high" label="High" />
        </RadioGroupField>
      ))}
    </div>
  );
}

Error

Setting error marks the fieldset invalid and replaces the helper text with the error message.

Project visibility

Controls who can find and open this project.

Private

Only invited members.

Workspace

Everyone in the workspace.

Public

Anyone with the link.

Select a visibility before creating the project.

Show code

import {
  RadioGroupField,
  RadioGroupFieldOption,
} from "@makeplane/propel/components/radio-group-field";

export default function ErrorDemo() {
  return (
    <RadioGroupField
      name="visibility"
      label="Project visibility"
      description="Controls who can find and open this project."
      density="comfortable"
      magnitude="md"
      error="Select a visibility before creating the project."
    >
      <RadioGroupFieldOption value="private" label="Private" description="Only invited members." />
      <RadioGroupFieldOption
        value="workspace"
        label="Workspace"
        description="Everyone in the workspace."
      />
      <RadioGroupFieldOption value="public" label="Public" description="Anyone with the link." />
    </RadioGroupField>
  );
}

Controlled

Priority

Pick one default priority.

Low

Medium

Recommended.

High

Selected: medium

Show code

import {
  RadioGroupField,
  RadioGroupFieldOption,
} from "@makeplane/propel/components/radio-group-field";
import * as React from "react";

export default function ControlledDemo() {
  const [value, setValue] = React.useState("medium");

  return (
    <RadioGroupField
      name="priority"
      label="Priority"
      description="Pick one default priority."
      density="comfortable"
      magnitude="md"
      value={value}
      onValueChange={(next) => setValue(next as string)}
      hint={`Selected: ${value}`}
    >
      <RadioGroupFieldOption value="low" label="Low" />
      <RadioGroupFieldOption value="medium" label="Medium" description="Recommended." />
      <RadioGroupFieldOption value="high" label="High" />
    </RadioGroupField>
  );
}

Installation

import {
  RadioGroupField,
  RadioGroupFieldOption,
} from "@makeplane/propel/components/radio-group-field";

Props

RadioGroupField

Prop	Type	Required	Description
render	ReactElement<unknown, string \| JSXElementConstructor<any>> \| ComponentRenderFn<HTMLProps, RadioGroupState>	No	Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render.
children	ReactNode	Yes	Radio option rows, usually `RadioGroupFieldOption`.
density	"comfortable" \| "compact"	Yes	Spacing between radio options.
description	ReactNode	No	Supporting text shown below the legend.
error	ReactNode	No	Error text shown below the group.
hint	ReactNode	No	Helper text shown below the group. Replaced by `error` when an error is set.
label	string	Yes	Visible fieldset legend.
magnitude	"md" \| "lg" \| "xl"	Yes	Legend and helper text size.
name	string	Yes	Submitted field name.

RadioGroupFieldOption

Prop	Type	Required	Description
render	ReactElement<unknown, string \| JSXElementConstructor<any>> \| ComponentRenderFn<HTMLProps, RadioRootState>	No	Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render.
label	string	Yes	Visible option label.
description	ReactNode	No	Optional supporting text announced as the radio description.
magnitude	"md" \| "lg" \| "xl"	No	Label and description size. Inherited from `RadioGroupField` when omitted.