The text area is a field for entering multiple lines of text or long passages.
It is suitable for managing text that includes line breaks, such as product descriptions, service introductions, and notes.
For information on uploading using the API and CSV, please refer to the documentation below.
Setting Item | Description |
|---|---|
Required Field | When enabled, input is required during submission. |
Description | This is the description displayed on the submission screen. |
Allow Input Only for Specific Patterns | Restricts input to only those that match the regular expression. There are limitations on the available regular expression patterns. For more details, please refer to "What regular expression patterns can be used for input string restrictions?". |
Limit Character Count | Limits the minimum and maximum number of characters that can be entered in the field. |
Default Value | You can set a default value of up to 1,000 characters during submission. |
Please refer to the documentation below for details.
The textarea returns as a string, so it can be directly specified in HTML elements.
Line breaks in the textarea are treated internally as \n. When outputting directly to HTML, line breaks will not be reflected, so you need to implement them in the following ways:
\n with <br> elementswhite-space: pre-wrap to reflect line breaksBelow is an implementation example using Next.js.
export default async function Page({ params }) {
const { slug } = await params;
// Fetch data using the microCMS JavaScript SDK (https://github.com/microcmsio/microcms-js-sdk)
const data = await client.getListDetail({
endpoint: "blog",
contentId: slug,
});
return (
<main>
{/*
textarea is the field ID. Please replace it with the actual field ID.
The `white-space: "pre-wrap"` style is applied to reflect line breaks.
*/}
<p style={{ whiteSpace: "pre-wrap" }}>{data.textarea}</p>
</main>
);
}