Text Field

Usage

textField.tsx

import { TextField } from "@uj-vilag/dap-components";

export default function TextFieldExample() {
  return (
    <div>
      <TextField placeholder="Enter text here" />
    </div>
  );
}

Props

This component renders a <input> element, so all native input props are supported.

Prop

Type

Examples

Sizes

textField-sizes.tsx

import { TextField } from "@uj-vilag/dap-components";

export default function TextFieldSizesExample() {
  return (
    <div className="flex flex-col gap-8">
      <TextField size="large" placeholder="Large size" />
      <TextField size="small" placeholder="Small size" />
      <TextField size="xSmall" placeholder="Extra small size" />
    </div>
  );
}

Status

textField-statuses.tsx

import { TextField } from "@uj-vilag/dap-components";

export default function TextFieldStatusesExample() {
  return (
    <div className="flex flex-col gap-8">
      <TextField status="error" placeholder="Error state" />
      <TextField status="success" placeholder="Success state" />
    </div>
  );
}

Disabled & Readonly

textField-disabled-readonly.tsx

import { TextField } from "@uj-vilag/dap-components";

export default function TextFieldDisabledReadonlyExample() {
  return (
    <div className="flex flex-col gap-8">
      <TextField disabled placeholder="Disabled state" />
      <TextField readOnly placeholder="Readonly state" />
    </div>
  );
}

With Label & Feedback

Please enter your email address.

Please enter a valid email address.

Username

Choose a unique username for your account.

This username is available!

textField-label-feedback.tsx

import { TextField, Label, Feedback } from "@uj-vilag/dap-components";

export default function TextFieldLabelFeedbackExample() {
  return (
    <div className="flex flex-col gap-8">
      <Label
        labelText="Email"
        requirement="required"
        htmlFor="email-input"
        helperText="Please enter your email address."
      >
        <TextField
          placeholder="johndoe@example.com"
          required
          status="error"
          id="email-input"
          aria-describedby="email-feedback email-input-helperText"
        />
        <Feedback
          message="Please enter a valid email address."
          id="email-feedback"
        />
      </Label>
      <Label
        labelText="Username"
        requirement="required"
        htmlFor="username-input"
        helperText="Choose a unique username for your account."
      >
        <TextField
          defaultValue="john_doe_2026"
          required
          status="success"
          id="username-input"
          aria-describedby="username-feedback username-input-helperText"
        />
        <Feedback
          message="This username is available!"
          variant="positive"
          id="username-feedback"
        />
      </Label>
    </div>
  );
}