Components

import { RecoilRoot } from "recoil";
import { TextInput } from "@/ui/input/components/TextInput";

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

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

  return (
    <RecoilRoot>
      <TextInput
        className
        label="Username"
        onChange={handleChange}
        fullWidth={false}
        disableHotkeys={false}
        error="Invalid username"
        onKeyDown={handleKeyDown}
        RightIcon={null}
      />
    </RecoilRoot>
  );
};

Autosize Text Input

Text input component that automatically adjusts its height based on the content.

Usage

Props

import { RecoilRoot } from "recoil";
import { AutosizeTextInput } from "@/ui/input/components/AutosizeTextInput";

export const MyComponent = () => {
  return (
    <RecoilRoot>
      <AutosizeTextInput
        onValidate={() => console.log("onValidate function fired")}
        minRows={1}
        placeholder="Write a comment"
        onFocus={() => console.log("onFocus function fired")}
        variant="icon"
        buttonTitle
        value="Task: "
      />
    </RecoilRoot>
  );
};

Entity Title Double Text Input

Displays a pair of text inputs side by side, allowing the user to edit two related values simultaneously.

Usage

Props

import { RecoilRoot } from "recoil";
import React, { useState } from "react";
import { EntityTitleDoubleTextInput } from "@/ui/input/components/EntityTitleDoubleTextInput";

export const MyComponent = () => {

    const [firstValue, setFirstValue] = useState(
      "First Value"
    );
    const [secondValue, setSecondValue] = useState(
      "Second Value"
    );

    const handleInputChange = (newFirstValue, newSecondValue) => {
      setFirstValue(newFirstValue);
      setSecondValue(newSecondValue);
    };


  return (
    <RecoilRoot>
      <EntityTitleDoubleTextInput
        firstValue={firstValue}
        secondValue={secondValue}
        firstValuePlaceholder="Enter First Value"
        secondValuePlaceholder="Enter Second Value"
        onChange={handleInputChange}
      />
    </RecoilRoot>
  );
};

Text Area

Allows you to create multi-line text inputs.

Usage

Props

import { TextArea } from "@/ui/input/components/TextArea";

export const MyComponent = () => {
  return (
    <TextArea
    disabled={false}
    minRows={4}
    onChange={()=>console.log('On change function fired')}
    placeholder="Enter text here"
    value=""
    />
  );
};

Noticed something to change?

As an open-source company, we welcome contributions through Github. Help us keep it up-to-date, accurate, and easy to understand by getting involved and sharing your ideas!

Edit Content