Input

The Input component is a fundamental piece of UI that allows users to input text into your application. It supports a variety of types including text, password, email, etc. Additionally, it provides customizable options such as adornments, size, loading state, error state, and more.

Playground

Use the playground below to explore the different options available for the Input component:

Input

This is helper text

Variant

Size

Required

ReadOnly

Disabled

Error

Overrides helper text

Clearable

Label

Placeholder

Helper Text

import React from "react"
import { Input } from "@creation-ui/react"

export const Example = () => (
  <Input
    variant={"outlined"}
    size={"md"}
    error={""}
    clearable
    label={"Input"}
    placeholder={"Placeholder"}
    helperText={"This is helper text"}
  />
)

Width

Please note that the Input component dynamically adjusts its width based on the length of its content. To set a fixed width, you can provide your own width constraints via a custom wrapper or by passing a class to the className prop:

//example with tailwindcss custom width
<Input cx={{ container: { inner: 'w-[200px]' } }} />

w-[200px]

w-96

w-2/3

w-full

Input Adornments

Adornments are icons or other elements that can be added to the start or end of the Input component for additional interactivity or visual feedback:

Password

Interactive icon

You can also use an interactive icon with the Input component, such as a visibility toggle for password fields:

Password

You can toggle my visibility

Component API

Refer to the props table below for a detailed list of all properties that you can use to customize the Input component. In addition to these, it accepts all properties applicable to the native input HTML element:

[object Object]

Prop	Default	Description
`size`	`md`	`sm \| md \| lg` Size of the element
`variant`	`outlined`	`contained \| outlined \| text` Variant of the element
`required`	—	`boolean` Is element required?
`readOnly`	—	`boolean` Is element read-only?
`label`	—	`string` Input label
`disabled`	—	`boolean` Is disabled?
`loading`	—	`boolean` Show loading state
`startAdornment`	—	`React.ReactNode` Icon on the left side of the component
`endAdornment`	—	`React.ReactNode` Icon on the right side of the component
`helperText`	—	`boolean` Additional information for display with component
`error`	—	`boolean` Text to be displayed when input is invalid
`cx`	—	`{ input?: 'string', label?: 'string', container?: { inner?: 'string', outer?: 'string', } }` Class names manipulation API. Each property ("input", "label", etc.) is assigned to different Input component

Date Picker Input Base