<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 react-feather (opens in a new tab) internally.

import { FieldLabel } from "@measured/puck";
import { Globe } from "react-feather";
 
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