Input

A text input component for forms and user data entry with built-in styling and accessibility features.

Code

import { Field, FieldDescription, FieldLabel, Input } from "@falcon/ui-kit";

export function Example() {
  return (
    <Field>
      <FieldLabel htmlFor="input-demo-api-key">API Key</FieldLabel>
      <Input id="input-demo-api-key" type="password" placeholder="sk-..." />
      <FieldDescription>
        Your API key is encrypted and stored securely.
      </FieldDescription>
    </Field>
  );
}

Basic

Code

import { Input } from "@falcon/ui-kit";

export function Example() {
  return <Input placeholder="Enter text" aria-label="Enter text" />;
}

Field

Use Field, FieldLabel, and FieldDescription to create an input with a label and description.

Code

import { Field, FieldDescription, FieldLabel, Input } from "@falcon/ui-kit";

export function Example() {
  return (
    <Field>
      <FieldLabel htmlFor="input-field-username">Username</FieldLabel>
      <Input
        id="input-field-username"
        type="text"
        placeholder="Enter your username"
      />
      <FieldDescription>
        Choose a unique username for your account.
      </FieldDescription>
    </Field>
  );
}

Field Group

Use FieldGroup to show multiple Field blocks and to build forms.

Code

import {
  Button,
  Field,
  FieldDescription,
  FieldGroup,
  FieldLabel,
  Input,
} from "@falcon/ui-kit";

export function Example() {
  return (
    <FieldGroup>
      <Field>
        <FieldLabel htmlFor="fieldgroup-name">Name</FieldLabel>
        <Input id="fieldgroup-name" placeholder="Jordan Lee" />
      </Field>
      <Field>
        <FieldLabel htmlFor="fieldgroup-email">Email</FieldLabel>
        <Input
          id="fieldgroup-email"
          type="email"
          placeholder="name@example.com"
        />
        <FieldDescription>
          We&apos;ll send updates to this address.
        </FieldDescription>
      </Field>
      <Field orientation="horizontal">
        <Button type="reset" variant="outline">
          Reset
        </Button>
        <Button type="submit">Submit</Button>
      </Field>
    </FieldGroup>
  );
}

Disabled

Use the disabled prop to disable the input. To style the disabled state, add the data-disabled attribute to the Field component.

Code

import { Field, FieldDescription, FieldLabel, Input } from "@falcon/ui-kit";

export function Example() {
  return (
    <Field data-disabled>
      <FieldLabel htmlFor="input-demo-disabled">Email</FieldLabel>
      <Input
        id="input-demo-disabled"
        type="email"
        placeholder="Email"
        disabled
      />
      <FieldDescription>This field is currently disabled.</FieldDescription>
    </Field>
  );
}

Invalid

Use the aria-invalid prop to mark the input as invalid. To style the invalid state, add the data-invalid attribute to the Field component.

Code

import { Field, FieldDescription, FieldLabel, Input } from "@falcon/ui-kit";

export function Example() {
  return (
    <Field data-invalid>
      <FieldLabel htmlFor="input-invalid">Invalid Input</FieldLabel>
      <Input id="input-invalid" placeholder="Error" aria-invalid />
      <FieldDescription>
        This field contains validation errors.
      </FieldDescription>
    </Field>
  );
}

File

Use the type="file" prop to create a file input.

Code

import { Field, FieldDescription, FieldLabel, Input } from "@falcon/ui-kit";

export function Example() {
  return (
    <Field>
      <FieldLabel htmlFor="picture">Picture</FieldLabel>
      <Input id="picture" type="file" />
      <FieldDescription>Select a picture to upload.</FieldDescription>
    </Field>
  );
}

Inline

Use Field with orientation="horizontal" to create an inline input. Pair with Button to create a search input with a button.

Code

import { Button, Field, Input } from "@falcon/ui-kit";

export function Example() {
  return (
    <Field orientation="horizontal">
      <Input type="search" placeholder="Search..." aria-label="Search" />
      <Button>Search</Button>
    </Field>
  );
}

Grid

Use a grid layout to place multiple inputs side by side.

Code

import { Field, FieldGroup, FieldLabel, Input } from "@falcon/ui-kit";

export function Example() {
  return (
    <FieldGroup className="tw:grid tw:max-w-sm tw:grid-cols-2">
      <Field>
        <FieldLabel htmlFor="first-name">First Name</FieldLabel>
        <Input id="first-name" placeholder="Jordan" />
      </Field>
      <Field>
        <FieldLabel htmlFor="last-name">Last Name</FieldLabel>
        <Input id="last-name" placeholder="Lee" />
      </Field>
    </FieldGroup>
  );
}

Required

Use the required attribute to indicate required inputs.

Code

import { Field, FieldDescription, FieldLabel, Input } from "@falcon/ui-kit";

export function Example() {
  return (
    <Field>
      <FieldLabel htmlFor="input-required">
        Required Field <span className="tw:text-destructive">*</span>
      </FieldLabel>
      <Input
        id="input-required"
        placeholder="This field is required"
        required
      />
      <FieldDescription>This field must be filled out.</FieldDescription>
    </Field>
  );
}

Badge

Use Badge in the label to highlight a recommended field.

Code

import { Badge, Field, FieldLabel, Input } from "@falcon/ui-kit";

export function Example() {
  return (
    <Field>
      <FieldLabel htmlFor="input-badge">
        Webhook URL{" "}
        <Badge variant="secondary" className="tw:ml-auto">
          Beta
        </Badge>
      </FieldLabel>
      <Input
        id="input-badge"
        type="url"
        placeholder="https://api.example.com/webhook"
      />
    </Field>
  );
}

Input Group

To add icons, text, or buttons inside an input, use the InputGroup component. See the InputGroup component for more examples.

Code

import {
  Field,
  FieldLabel,
  InfoIcon,
  InputGroup,
  InputGroupAddon,
  InputGroupInput,
  InputGroupText,
} from "@falcon/ui-kit";

export function Example() {
  return (
    <Field>
      <FieldLabel htmlFor="input-group-url">Website URL</FieldLabel>
      <InputGroup>
        <InputGroupInput id="input-group-url" placeholder="example.com" />
        <InputGroupAddon>
          <InputGroupText>https://</InputGroupText>
        </InputGroupAddon>
        <InputGroupAddon align="inline-end">
          <InfoIcon />
        </InputGroupAddon>
      </InputGroup>
    </Field>
  );
}

Button Group

To add buttons to an input, use the ButtonGroup component. See the ButtonGroup component for more examples.

Code

import { Button, ButtonGroup, Field, FieldLabel, Input } from "@falcon/ui-kit";

export function Example() {
  return (
    <Field>
      <FieldLabel htmlFor="input-button-group">Search</FieldLabel>
      <ButtonGroup>
        <Input id="input-button-group" placeholder="Type to search..." />
        <Button variant="outline">Search</Button>
      </ButtonGroup>
    </Field>
  );
}

Form

A full form example with multiple inputs, a select, and a button.

Code

import {
  Button,
  Field,
  FieldDescription,
  FieldGroup,
  FieldLabel,
  Input,
  Select,
  SelectContent,
  SelectGroup,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@falcon/ui-kit";

export function Example() {
  const countries = [
    { label: "United States", value: "us" },
    { label: "United Kingdom", value: "uk" },
    { label: "Canada", value: "ca" },
  ];
  return (
    <form className="tw:w-full tw:max-w-sm">
      <FieldGroup>
        <Field>
          <FieldLabel htmlFor="form-name">Name</FieldLabel>
          <Input
            id="form-name"
            type="text"
            placeholder="Maria Larsen"
            required
          />
        </Field>
        <Field>
          <FieldLabel htmlFor="form-email">Email</FieldLabel>
          <Input id="form-email" type="email" placeholder="john@example.com" />
          <FieldDescription>
            We&apos;ll never share your email with anyone.
          </FieldDescription>
        </Field>
        <div className="tw:grid tw:grid-cols-2 tw:gap-4">
          <Field>
            <FieldLabel htmlFor="form-phone">Phone</FieldLabel>
            <Input id="form-phone" type="tel" placeholder="+1 (555) 123-4567" />
          </Field>
          <Field>
            <FieldLabel htmlFor="form-country">Country</FieldLabel>
            <Select items={countries} defaultValue="us">
              <SelectTrigger id="form-country">
                <SelectValue />
              </SelectTrigger>
              <SelectContent>
                <SelectGroup>
                  {countries.map((country) => (
                    <SelectItem key={country.value} value={country.value}>
                      {country.label}
                    </SelectItem>
                  ))}
                </SelectGroup>
              </SelectContent>
            </Select>
          </Field>
        </div>
        <Field>
          <FieldLabel htmlFor="form-address">Address</FieldLabel>
          <Input id="form-address" type="text" placeholder="123 Main St" />
        </Field>
        <Field orientation="horizontal">
          <Button type="button" variant="outline">
            Cancel
          </Button>
          <Button type="submit">Submit</Button>
        </Field>
      </FieldGroup>
    </form>
  );
}

API

Input

Captures a single line of text or a file. Renders an <input> element, accepts standard <input> props, and supports render to replace the element.

Props

className

className?: string

CSS class applied to the input.

defaultValue

defaultValue?: string | number | readonly string[]

The initial value of an uncontrolled input.

onValueChange

onValueChange?: ((value: string, eventDetails: InputPrimitive.ChangeEventDetails) => void)

Callback fired when the value changes. Use with value for controlled input.

render

render?: React.ReactElement<any, string | React.JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, InputState>

Allows replacing the input element or composing it with another component.

style

style?: React.CSSProperties | ((state: InputState) => React.CSSProperties | undefined)

Style applied to the input, or a function based on its state.

value

value?: string | number | readonly string[]

The value of a controlled input.