Text Field

Displays a text field with an optional label.
Properties
disabled
error
variant
label
helpText
icon
iconRight
Example
Source Code
Installation
"use client";

import React from "react";
import { TextField } from "@/subframe/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
Input
Prop
Type
Default
Additional info
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