Usage
import { Input } from "lambda-ui-components";
<Input />Input
Input component is a form element that allows users to enter text
Playground
Experiment with all the properties of the Input component in real time.
Properties
placeholder
Text shown when the input is empty.
label
Defines the input label.
errorMessage
Custom message shown when invalid.
helperText
Adds supporting text below the input.
prefix
Adds an element before the value.
suffix
Adds an element after the value.
color
Controls the color of the switch when active.
variant
Selects the visual style.
type
Chooses the native input type.
size
Adjusts the input’s scale.
radius
Controls corner roundness.
floatingLabel
Enables the floating label effect.
invalid
Marks the input as invalid.
required
Marks the field as mandatory.
disabled
Makes the input non-interactive.
Controlledvalue
Allows you to manage the input value from the parent component state (controlled use).
API Reference
Props
Prop | Default | Type |
|---|---|---|
size | "medium" | "tiny" | "small" | "medium" | "large" |
radius | "medium" | "none" | "tiny" | "small" | "medium" | "large" | "full" |
variant | "outlined" | "outlined" | "soft" |
invalid | false | boolean |
disabled | false | boolean |
type | "text" | "text" | "password" | "email" | string |
label | undefined | string |
errorMessage | undefined | string |
floatingLabel | false | boolean |
helperText | undefined | string |
required | false | boolean |
prefix | undefined | ReactNode | string |
suffix | undefined | ReactNode | string |
onChange | undefined | (value: string) => void |
value | "" | string |
placeholder | "" | string |
joinposition | undefined | "first" | "last" | "middle" |