Label

Name *

Large labelDisabled label

Import

import { Label, LabelRequired } from "@pelagornis/page/components";

Example

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

src/components/LabelExample.tsx

import { Input, Label, LabelRequired, Stack } from "@pelagornis/page/components";

export default function LabelDemo() {
  return (
    <Stack gap="sizeLarge" className="w-full max-w-sm">
      <Stack gap="sizeXSmall">
        <Label htmlFor="label-name">
          Name <LabelRequired />
        </Label>
        <Input id="label-name" placeholder="Jane Doe" fullWidth />
      </Stack>
      <Label size="lg">Large label</Label>
      <Label disabled>Disabled label</Label>
    </Stack>
  );
}

Use in MDX

Label 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 { Label } from "@pelagornis/page/components";

<Label htmlFor="email" required>Email address</Label>

Use in Markdoc

pageMarkdoc() registers a label 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

{% label htmlFor="email" required=true %}Email address{% /label %}

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

Variants

Values the component accepts for each variant prop.

Prop	Values
size	sm md lg

Anatomy

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

Part	Role
root	label
required	label-required

Reference

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