Saltar al contenido principal
Encabezado

“Entrada de Texto”

“Permite a los usuarios ingresar y editar texto."
import { RecoilRoot } from "recoil";
import { TextInput } from "@/ui/input/components/TextInput";

export const MyComponent = () => {
  const handleChange = (text) => {
    console.log("Entrada modificada:", text);
  };

  const handleKeyDown = (event) => {
    console.log("Tecla presionada:", event.key);
  };

  return (
    <RecoilRoot>
      <TextInput
        className
        label="Nombre de usuario"
        onChange={handleChange}
        fullWidth={false}
        disableHotkeys={false}
        error="Nombre de usuario no válido"
        onKeyDown={handleKeyDown}
        RightIcon={null}
      />
    </RecoilRoot>
  );
};
},{

"Entrada de Texto que se ajusta automáticamente”

“Componente de entrada de texto que ajusta automáticamente su altura según el contenido."
import { RecoilRoot } from "recoil";
import { AutosizeTextInput } from "@/ui/input/components/AutosizeTextInput";

export const MyComponent = () => {
  return (
    <RecoilRoot>
      <AutosizeTextInput
        onValidate={() => console.log("Función onValidate ejecutada")}
        minRows={1}
        placeholder="Escribe un comentario"
        onFocus={() => console.log("Función onFocus ejecutada")}
        variant="icon"
        buttonTitle
        value="Tarea: "
      />
    </RecoilRoot>
  );
};

"Área de Texto”

“Te permite crear entradas de texto de varias líneas."
import { TextArea } from "@/ui/input/components/TextArea";

export const MyComponent = () => {
  return (
    <TextArea
    disabled={false}
    minRows={4}
    onChange={()=>console.log('Función onChange ejecutada')}
    placeholder="Introduce texto aquí"
    value=""
    />
  );
};