Campo de texto

Componente de campo de texto

Campos de texto são elementos de UI versáteis que permitem aos usuários inserir, editar e exibir texto dentro de uma aplicação. Desempenham um papel crucial na interação do usuário, fornecendo uma maneira direta para os usuários inserirem dados, fornecerem feedback, preencher formulários e interagir com várias interfaces que requerem entrada de texto. Campos de texto podem ser usados para entradas curtas como nomes de usuário ou senhas, bem como para entradas de texto mais longas como comentários, mensagens ou descrições detalhadas.

No contexto do FireCMS UI, os princípios de design e componentes são baseados livremente nas diretrizes do Material Design do Google. Isso significa que os campos de texto no FireCMS se beneficiam de uma linguagem de design consistente e amigável, garantindo uma aparência coesa em diferentes aplicações web. Ao aproveitar esses componentes, os desenvolvedores podem construir rapidamente formulários e áreas de entrada interativas e visualmente atraentes que melhoram a experiência do usuário e mantêm a consistência do design.

Uso

Para usar o TextField, importe-o do seu diretório de componentes e passe value, onChange e outras props necessárias para atender ao seu caso de uso.

Campo de texto básico

Um campo de texto básico com configuração mínima:

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"
        />
    );
}

Campo de texto multilinha

Você pode criar um campo de texto multilinha definindo a prop multiline como true. Isso é útil para entradas de texto mais longas como comentários ou descrições.

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
            minRows={4}
        />
    );
}

Sizes

O componente TextField vem em vários tamanhos para se adequar a diferentes necessidades de layout. Você pode ajustar o tamanho usando a prop size.

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="Small Size"
                placeholder="Small size"
                size="small"
            />
            <TextField
                value={value}
                onChange={(e) => setValue(e.target.value)}
                label="Medium Size"
                placeholder="Medium size"
                size="medium"
            />
            <TextField
                value={value}
                onChange={(e) => setValue(e.target.value)}
                label="Large Size"
                placeholder="Large size"
                size="large"
            />
        </div>
    );
}

Adornos

Você pode adicionar adornos ao início ou fim de um campo de texto para fornecer contexto ou funcionalidade adicional.

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>}
        />
    );
}