Input

This component renders an input field with customizable styles.

Import

import {Input} from "cui-react";

Example

Render a basic input field:

Visual:

Code:

<Input
  labelText="Email Address"
  id="email"
  name="email"
  type="email"
  pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$"
/>

Customizing

You can customize the Input component using the following props:

• labelText (required): Label text for the input field.
• id (optional): ID attribute for the input field.
• name (optional): Name attribute for the input field.
• type (optional): Type of input field (text, email, password, etc.).
• pattern (optional): Pattern attribute for input validation.
• color (optional): Color variant of the input field (primary, secondary, success, warning, dark, light). Defaults to primary.
• textColor (optional): Text color variant of the input field (primary, secondary, success, warning, dark, light). Defaults to primary.

Example: Custom Color and Text Color

Visual:

Code:

<Input
  labelText="Username"
  id="username"
  name="username"
  type="text"
  color="secondary"
  textColor="dark"
/>

This example renders an input field with a secondary color variant and dark text color.

Props

• labelText

  • Type: string
  • Description: Label text for the input field.

• id

  • Type: string
  • Description: ID attribute for the input field.

• name

  • Type: string
  • Description: Name attribute for the input field.

• type

  • Type: string
  • Description: Type of input field (text, email, password, etc.).

• pattern

  • Type: string
  • Description: Pattern attribute for input validation.

• color

  • Type: "primary" | "secondary" | "success" | "warning" | "dark" | "light"
  • Description: Color variant of the input field. Defaults to primary.

• textColor

  • Type: "primary" | "secondary" | "success" | "warning" | "dark" | "light"
  • Description: Text color variant of the input field. Defaults to primary.