<FieldLabel>
Render a styled label
when creating custom
fields.
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>
);
// ...
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>
);
// ...
Example