Input

Allows users to enter text, numbers, and other data. Inputs are essential form elements with support for various types, validation states, and styling options.

Basic Usage

Default input styles and variants.

BasicUsage.tsx

<Row flexWrap>
  <Input default placeholder="default input" />
  <Input accent placeholder="accent input" />
  <Input placeholder="primary input" primary />
  <Input placeholder="secondary input" secondary />
  <Input placeholder="tertiary input" tertiary />
  <Input placeholder="success input" success />
  <Input danger placeholder="danger input" />
  <Input placeholder="warning input" warning />
  <Input info placeholder="info input" />
  <Input link placeholder="link input" />
</Row>

Sizes

Inputs come in different sizes - xs, sm, md, lg, xl.

Sizes.tsx

<Col>
  <Input placeholder="xs input" xs />
  <Input placeholder="sm input" sm />
  <Input md placeholder="md input" />
  <Input lg placeholder="lg input" />
  <Input placeholder="xl input" xl />
</Col>

Input Types

Various input types for different use cases.

InputTypes.tsx

<Col>
  <Input placeholder="Text input" type="text" />
  <Input placeholder="Password input" type="password" />
  <Input placeholder="Email input" type="email" />
  <Input placeholder="Number input" type="number" />
  <Input placeholder="Phone input" type="tel" />
  <Input placeholder="URL input" type="url" />
  <Input placeholder="Search input" type="search" />
</Col>

Input States

Different input states for user feedback.

InputStates.tsx

<Col>
  <Input placeholder="Normal input" />
  <Input disabled placeholder="Disabled input" />
  <Input placeholder="Readonly input" readOnly />
  <Input placeholder="Required input" required />
</Col>

Border Radius Options

Input supports three border radius styles: rounded (default), pill, and sharp.

BorderRadiusOptions.tsx

<Col>
  <Input pill placeholder="pill input" />
  <Input placeholder="sharp input" sharp />
  <Input placeholder="rounded input" rounded />
</Col>

Input Styles

Inputs can be styled as outline (default) or filled.

filled Variant

outline Variant

InputStyles.tsx

<Col lg>
  <div>
    <Label className="mb-2 capitalize" semibold>filled Variant</Label>
    <Row flexWrap>
      <Input default filled placeholder="filled default" />
      <Input accent filled placeholder="filled accent" />
      <Input filled placeholder="filled primary" primary />
      <Input filled placeholder="filled secondary" secondary />
    </Row>
  </div>
  <div>
    <Label className="mb-2 capitalize" semibold>outline Variant</Label>
    <Row flexWrap>
      <Input default outline placeholder="outline default" />
      <Input accent outline placeholder="outline accent" />
      <Input outline placeholder="outline primary" primary />
      <Input outline placeholder="outline secondary" secondary />
    </Row>
  </div>
</Col>

With Labels

Inputs paired with labels for better accessibility and user experience.

Full Name

Email Address *

Phone Number

WithLabels.tsx

<Col>
  <div>
    <Label htmlFor="name">Full Name</Label>
    <Input id="name" placeholder="Enter your full name" type="text" />
  </div>
  <div>
    <Label htmlFor="email">Email Address *</Label>
    <Input id="email" placeholder="Enter your email" required type="email" />
  </div>
  <div>
    <Label htmlFor="phone">Phone Number</Label>
    <Input id="phone" placeholder="Enter your phone number" type="tel" />
  </div>
</Col>

Validation Examples

Examples showing different validation states and styling.

Valid Email

Username (Optional)

Invalid Password

ValidationExamples.tsx

<Col>
  <div>
    <Label success>Valid Email</Label>
    <Input readOnly success type="email" value="user@example.com" />
  </div>
  <div>
    <Label warning>Username (Optional)</Label>
    <Input placeholder="Enter username" type="text" warning />
  </div>
  <div>
    <Label danger>Invalid Password</Label>
    <Input danger placeholder="Password too short" type="password" />
  </div>
</Col>