<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