The number field is used to manage numerical data such as prices, quantities, rankings, and orders.
Unlike text fields, it restricts input to numerical values, making it suitable for accurate calculations on the frontend and sorting based on numerical values.
Click on the input field and enter half-width numbers.
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. |
Limit Values | Specifies the minimum and maximum values that can be entered in the field. |
Default Value | You can set the default value during submission. |
Please refer to the documentation below for details.
The number field returns data in numeric format, so it is displayed not only as is but also processed for calculations and format conversions.
Below is an implementation example in Next.js that displays the price.
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: "products",
contentId: slug,
});
return (
<main>
{/* price is the field ID. Please replace it with the actual field ID */}
<p>Price: {data.price.toLocaleString()} yen (including tax)</p>
</main>
);
}