Radio

BasicFor personal docsProIncludes versioned docsTeamShared workspaces

Import

import { Radio } from "@pelagornis/page/components";

Example

The preview above renders this file. Copy it into src/components/ to start from it.

src/components/RadioExample.tsx

import { useState } from "react";
import { Radio, Stack } from "@pelagornis/page/components";

const plans = [
  { value: "basic", label: "Basic", description: "For personal docs" },
  { value: "pro", label: "Pro", description: "Includes versioned docs" },
  { value: "team", label: "Team", description: "Shared workspaces" },
];

export default function RadioDemo() {
  const [plan, setPlan] = useState("pro");

  return (
    <Stack gap="sizeSmall" role="radiogroup" aria-label="Plan">
      {plans.map((item) => (
        <Radio
          key={item.value}
          name="plan"
          value={item.value}
          label={item.label}
          description={item.description}
          checked={plan === item.value}
          onChange={(event) => setPlan(event.target.value)}
        />
      ))}
    </Stack>
  );
}

Use in MDX

Radio can be written straight in an .mdx page. Import it below the frontmatter. It renders on the server, so no client directive is needed.

src/content/docs/example.mdx

---
title: Example
---

import { Radio } from "@pelagornis/page/components";

<Radio name="plan" value="basic" label="Basic" defaultChecked />
<Radio name="plan" value="pro" label="Pro" />

Use in Markdoc

pageMarkdoc() registers a radio tag for this component. Add the preset once in markdoc.config.mjs (see Use in Markdoc), then write the tag in any .mdoc page.

src/content/docs/example.mdoc

{% radio name="plan" value="basic" label="Basic" defaultChecked=true /%}
{% radio name="plan" value="pro" label="Pro" /%}

Attributes use the same names and values as the React props.

Anatomy

Parts of the component and the data-refineui role each one renders.

Part	Role
root	radio

States

States the component styles. Component states are exposed as data attributes.

Kind	States
Pseudo	focus-visible

Keyboard

Keys the component handles when it has focus.

Key	Action
Space	activate

Reference

• RefineUI · Radio for design guidance and token detail.
• Use in MDX and Use in Markdoc for the general rules.