Text - Twenty — ContextQMD

Text Input

Allows users to enter and edit text.

jsx

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 (
    <TextInput
      className
      label="Username"
      onChange={handleChange}
      fullWidth={false}
      disableHotkeys={false}
      error="Invalid username"
      onKeyDown={handleKeyDown}
      RightIcon={null}
    />
  );
};

</Tab> <Tab title="Props">

Props	Type	Description
className	string	Optional name for additional styling
label	string	Represents the label for the input
onChange	function	The function called when the input value changes
fullWidth	boolean	Indicates whether the input should take up 100% of the width
disableHotkeys	boolean	Indicates whether hotkeys are enabled for the input
error	string	Represents the error message to be displayed. When provided, it also adds an icon error on the right side of the input
onKeyDown	function	Called when a key is pressed down while the input field is focused. Receives a `React.KeyboardEvent` as an argument
RightIcon	IconComponent	An optional icon component displayed on the right side of the input

The component also accepts other HTML input element props.

</Tab> </Tabs>

Autosize Text Input

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

jsx

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

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

</Tab> <Tab title="Props">

Props	Type	Description
onValidate	function	The callback function you want to trigger when the user validates the input
minRows	number	The minimum number of rows for the text area
placeholder	string	The placeholder text you want to display when the text area is empty
onFocus	function	The callback function you want to trigger when the text area gains focus
variant	string	The variant of the input. Options include: `default`, `icon`, and `button`
buttonTitle	string	The title for the button (only applicable for the button variant)
value	string	The initial value for the text area

</Tab> </Tabs>

Text Area

Allows you to create multi-line text inputs.

jsx

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

</Tab> <Tab title="Props">

Props	Type	Description
disabled	boolean	Indicates whether the text area is disabled
minRows	number	Minimum number of visible rows for the text area.
onChange	function	Callback function triggered when the text area content changes
placeholder	string	Placeholder text displayed when the text area is empty
value	string	The current value of the text area

</Tab> </Tabs>