API ReferenceComponents<FieldLabel>

<FieldLabel>

Render a styled label when creating custom fields.

Interactive Demo

Example


import { FieldLabel } from "@measured/puck";
 
const CustomField = () => (
  <FieldLabel label="Title">
    <input />
  </FieldLabel>
);
 
const config = {
  components: {
    Example: {
      fields: {
        title: {
          type: "custom",
          render: MyCustomField,
        },
      },
    },
  },
};

Props

Param	Example	Type	Status
`label`	`label: "Title"`	String	Required
`children`	`children: <div />`	ReactNode	-
`className`	`className: "MyLabel"`	String	-
`el`	`el: false`	”label” \| “div”	-
`icon`	`icon: <svg />`	ReactNode	-
`readOnly`	`readOnly: false`	Boolean	-

Required props

`label`

The label string for the fields.


import { FieldLabel } from "@measured/puck";
 
const CustomField = () => (
  <FieldLabel label="Title">
    <input />
  </FieldLabel>
);
 
// ...

Optional props

`children`

A node to render inside the FieldLabel’s internal <label> element. You can also define your input element as a sibling.


import { FieldLabel } from "@measured/puck";
 
const CustomField = () => (
  <FieldLabel label="Title">
    <input />
  </FieldLabel>
);
 
// ...

`className`

Define a custom class for the field label.


import { FieldLabel } from "@measured/puck";
 
const CustomField = () => (
  <FieldLabel className="MyClass" label="Title">
    <input />
  </FieldLabel>
);
 
// ...

`el`

Specify whether to render a label or div. Defaults to "label".


import { FieldLabel } from "@measured/puck";
 
const CustomField = () => (
  <FieldLabel el="div" label="Title">
    <input />
  </FieldLabel>
);
 
// ...

`icon`

Render an icon before the label text. Puck uses lucide-react internally.


import { FieldLabel } from "@measured/puck";
import { Globe } from "lucide-react";
 
const CustomField = () => (
  <FieldLabel icon={<Globe size="16" />} label="Title">
    <input />
  </FieldLabel>
);
 
// ...

Interactive Demo

Example

`readOnly`

Indicate to the user that this field is in a read-only state by showing a padlock icon to the right of the text.


import { FieldLabel } from "@measured/puck";
 
const CustomField = () => (
  <FieldLabel label="Title" readOnly>
    <input readOnly />
  </FieldLabel>
);
 
// ...

Interactive Demo

Example

<Puck>