Text Field Component

Text fields are versatile UI elements that allow users to input, edit, and display text within an application. They play a crucial role in user interaction, providing a straightforward way for users to enter data, provide feedback, complete forms, and interact with various interfaces that require text input. Text fields can be used for short inputs like usernames or passwords, as well as for longer text entries like comments, messages, or detailed descriptions.

In the context of FireCMS UI, the design principles and components are loosely based on Google's Material Design guidelines. This means that the text fields in FireCMS benefit from a consistent and user-friendly design language, ensuring a cohesive look and feel across different web applications. By leveraging these components, developers can quickly build interactive and visually appealing forms and input areas that enhance user experience and maintain design consistency.

Usage

To use the TextField, import it from your components directory and pass the value, onChange, and other necessary props to fit your use case.

Basic Text Field

A basic text field with minimal configuration:

import React, { useState } from "react";
import { TextField } from "@firecms/ui";

export default function TextFieldBasicDemo() {
    const [value, setValue] = useState("");

    return (
        <TextField
            value={value}
            onChange={(e) => setValue(e.target.value)}
            label="Basic Text Field"
            placeholder="Enter text"
        />
    );
}

Multiline Text Field

A text field that supports multiline inputs, suitable for comments or notes:

import React, { useState } from "react";
import { TextField } from "@firecms/ui";

export default function TextFieldMultilineDemo() {
    const [value, setValue] = useState("");

    return (
        <TextField
            value={value}
            onChange={(e) => setValue(e.target.value)}
            label="Multiline Text Field"
            placeholder="Enter text"
            multiline
            rows={4}
        />
    );
}

Text Field Sizes

Examples of different size options for the text field component:

import React, { useState } from "react";
import { TextField } from "@firecms/ui";

export default function TextFieldSizeDemo() {
    const [value, setValue] = useState("");

    return (
        <div className="flex flex-col gap-4">
            <TextField
                value={value}
                onChange={(e) => setValue(e.target.value)}
                label="Smallest Size"
                placeholder="Smallest size"
                size="smallest"
            />
            <TextField
                value={value}
                onChange={(e) => setValue(e.target.value)}
                label="Small Size"
                placeholder="Small size"
                size="small"
            />
            <TextField
                value={value}
                onChange={(e) => setValue(e.target.value)}
                label="Medium Size"
                placeholder="Medium size"
                size="medium"
            />
        </div>
    );
}

Text Field with Adornment

A text field featuring an end adornment for icons, action buttons, or informative text:

import React, { useState } from "react";
import { TextField } from "@firecms/ui";

export default function TextFieldAdornmentDemo() {
    const [value, setValue] = useState("");

    return (
        <TextField
            value={value}
            onChange={(e) => setValue(e.target.value)}
            label="Text Field with Adornment"
            placeholder="Enter text"
            endAdornment={<span>@</span>}
        />
    );
}

Text Field Props

The TextField component in FireCMS UI is highly customizable through various props. Below is a comprehensive list of props you can use to tailor the TextField to your needs:

• value: The current value of the text field. Required.
• onChange: Handler function called when the text field value changes. Required.
• label: The label displayed above the text field.
• placeholder: Placeholder text displayed when the text field is empty.
• multiline: If true, the text field will allow multiline input. Defaults to false.
• rows: Specifies the number of visible text lines for a multiline text field.
• variant: The variant to use for the text field. Options are 'standard', 'outlined', or 'filled'. Defaults to 'standard'.
• fullWidth: If true, the input will take up the full width of its container. Defaults to false.
• size: The size of the text field. Options are 'small' or 'medium'. Defaults to 'medium'.
• color: The color of the text field. Options are 'default', 'primary', or 'secondary'. Defaults to 'default'.
• type: The type of input element; e.g., password, text, email, etc. Defaults to 'text'.
• disabled: If true, the text field will be disabled. Defaults to false.
• helperText: Text that appears below the text field.
• error: If true, the text field will have an error state. Defaults to false.
• startAdornment: Element to be placed at the start of the text field.
• endAdornment: Element to be placed at the end of the text field.