Radio

BasicFor personal docsProIncludes versioned docsTeamShared workspaces

インポート

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

例

上のプレビューはこのファイルを描画したものです。src/components/ にコピーして使い始めてください。

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>
  );
}

MDX で使う

Radio は .mdx ページにそのまま書けます。frontmatter の下でインポートしてください。サーバーで描画されるので、client ディレクティブは要りません。

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" />

Markdoc で使う

pageMarkdoc() がこのコンポーネントの radio タグを登録します。markdoc.config.mjs にプリセットを一度追加すれば（Markdoc で使うを参照）、どの .mdoc ページでもタグを書けます。

src/content/docs/example.mdoc

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

属性の名前と値は React の props と同じです。

構造

コンポーネントを構成するパーツと、それぞれが描画する data-refineui のロールです。

パーツ	ロール
root	radio

状態

コンポーネントがスタイルを当てる状態です。コンポーネントの状態は data 属性として公開されます。

種類	状態
疑似クラス	focus-visible

キーボード

フォーカスがあるときにコンポーネントが処理するキーです。

キー	動作
Space	activate

参考

• デザインのガイドとトークンの詳細は RefineUI · Radio を参照してください。
• 共通のルールは MDX で使う と Markdoc で使う を参照してください。