Skip to main content
Version: 2.0.0

Text fields

Simple text field

Textfield

The most basic widget is the text field, which allows the user to input simple strings.

If you define a string property with no other configuration parameters, you will get a text field:

import { buildProperty } from "@firecms/core";

buildProperty({
dataType: "string",
name: "Name",
validation: {
// ...
}
});

The data type is string or number.

Internally the component used is [TextFieldBinding].

Multi line text field

Textfield

Use a multiline field when you want to enable the user to input strings that may contain line breaks.

Set the multiline flag to true in a string property.

import { buildProperty } from "@firecms/core";

buildProperty({
dataType: "string",
name: "Description",
multiline: true,
validation: {
// ...
}
});

The data type is string.

Internally the component used is [TextFieldBinding].

Markdown text field

Textfield

You can use a markdown field when you would like the end user to use advanced editing capabilities of text using the Markdown format.

Set the markdown flag to true in a string property.

import { buildProperty } from "@firecms/core";

buildProperty({
dataType: "string",
name: "Blog text",
markdown: true,
validation: {
// ...
}
});

The data type is string.

Internally the component used is [MarkdownFieldBinding].

Url text field

Textfield

You can use a URL field when you would like to ensure that the input of the end user is a valid URL.

Set the url flag to true in a string property.

import { buildProperty } from "@firecms/core";

buildProperty({
dataType: "string",
name: "Amazon link",
url: true,
validation: {
// ...
}
});

The data type is string.

Internally the component used is [TextFieldBinding].

Email field

Field

You can use an email field when you would like to ensure that the input of the end user is a valid email.

Set the email flag to true in a string property.

import { buildProperty } from "@firecms/core";

buildProperty({
dataType: "string",
name: "User email",
email: true,
validation: {
// ...
}
});

The data type is string.

Internally the component used is [TextFieldBinding].

Sign up to our newsletter to get the latest news and updates. No spam!