Radio

Lets a user pick one option from a set of mutually exclusive choices.

Basic

Priority

Low

Medium

High

Show code

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

export default function BasicDemo() {
  return (
    <Field name="priority">
      <FieldLabel magnitude="md" inset={false}>
        Priority
      </FieldLabel>
      <RadioGroup density="comfortable" defaultValue="low">
        <RadioGroupFieldOption magnitude="md" value="low" label="Low" />
        <RadioGroupFieldOption magnitude="md" value="medium" label="Medium" />
        <RadioGroupFieldOption magnitude="md" value="high" label="High" />
      </RadioGroup>
    </Field>
  );
}

Field composition

The ready-made RadioGroupField owns the legend, options, and helper text, so the group serializes under its name with no extra wiring.

Priority

Low

Medium

High

Only one priority can be active.

Show code

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

export default function FieldCompositionDemo() {
  return (
    <RadioGroupField
      name="priority"
      label="Priority"
      magnitude="md"
      density="comfortable"
      defaultValue="low"
      hint="Only one priority can be active."
    >
      <RadioGroupFieldOption value="low" label="Low" />
      <RadioGroupFieldOption value="medium" label="Medium" />
      <RadioGroupFieldOption value="high" label="High" />
    </RadioGroupField>
  );
}

Density

density sets the row spacing: comfortable (8px gap) or compact (flush rows, e.g. a settings panel where options read like menu items).

Comfortable density

Comfortable

8px gap

Compact density

Compact

Flush rows

Show code

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

export default function DensityDemo() {
  return (
    <div className="flex flex-wrap items-start gap-10">
      <RadioGroupField
        name="comfortableDensity"
        label="Comfortable density"
        magnitude="md"
        density="comfortable"
        defaultValue="low"
      >
        <RadioGroupFieldOption value="low" label="Comfortable" />
        <RadioGroupFieldOption value="medium" label="8px gap" />
      </RadioGroupField>
      <RadioGroupField
        name="compactDensity"
        label="Compact density"
        magnitude="md"
        density="compact"
        defaultValue="low"
      >
        <RadioGroupFieldOption value="low" label="Compact" />
        <RadioGroupFieldOption value="medium" label="Flush rows" />
      </RadioGroupField>
    </div>
  );
}

With description

Each option can carry supporting text, announced as the radio’s description.

Project visibility

Private

Only invited members can view this project.

Workspace

Everyone in the workspace can find and open it.

Public

Anyone with the link can view the project.

Show code

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

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

Controlled

Priority

Low

Medium

High

Selected: low

Show code

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

export default function ControlledDemo() {
  const [priority, setPriority] = React.useState("low");

  return (
    <div className="flex flex-col gap-3">
      <Field name="priority">
        <FieldLabel magnitude="md" inset={false}>
          Priority
        </FieldLabel>
        <RadioGroup
          density="comfortable"
          value={priority}
          onValueChange={(value) => setPriority(String(value))}
        >
          <RadioGroupFieldOption magnitude="md" value="low" label="Low" />
          <RadioGroupFieldOption magnitude="md" value="medium" label="Medium" />
          <RadioGroupFieldOption magnitude="md" value="high" label="High" />
        </RadioGroup>
      </Field>
      <output className="text-13 text-secondary">Selected: {priority}</output>
    </div>
  );
}

Installation

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

Props

Radio

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.

RadioGroup

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.
density	"comfortable" \| "compact"	Yes	Spacing between radio options.