Text Field

Displays a text field with an optional label.
Properties
disabled
error
variant
label
helpText
icon
iconRight

Installation

Usage

Example
Source Code
"use client";

import React from "react";
import { TextField } from "@/ui/components/TextField";

function TextFieldExample() {
  return (
    <TextField
      disabled={false}
      error={false}
      variant="outline"
      label=""
      helpText=""
      icon={null}
      iconRight={null}
    >
      <TextField.Input
        placeholder=""
        value=""
        onChange={(event: React.ChangeEvent<HTMLInputElement>) => {}}
      />
    </TextField>
  );
}

export default TextFieldExample;

Props

Text Field Props
Input Props
Prop
Type
Default value
Notes
disabled
boolean
false
error
boolean
false
variant
"outline" | "filled"
"outline"
label
string
""
helpText
string
""
icon
IconName
null
iconRight
IconName
null
children
React.ReactNode

Examples

Controlled

Use value and onChange props to control the displayed text or to set its initial value.

Disabled

Label, placeholder, help text

Use label, placeholder, and helpText props for additional information.

Error

Use error and helpText props for validating the entire group.

Types

Use type for specific input types like password, email, number, date