Skip to content

Input Component

Description

The Input component is a reusable text input field supporting: - Multiple variants: outlined, filled, and standard - Error handling and helper text - Start and end adornments - Multiline text area support - Clear button functionality

Props

Prop Type Default Description
id string - Unique identifier for the input.
label string - The label for the input field.
variant "outlined" , "filled" , "standard" "outlined" Defines the input style.
fullWidth boolean false Expands input width to 100%.
error boolean false Highlights input as an error.
helperText string - Additional message under the input.
disabled boolean false Disables the input.
multiline boolean false Enables textarea mode.
rows number 1 Number of rows for multiline.
startAdornment ReactNode - Component before the input.
endAdornment ReactNode - Component after the input.
onClear () => void - Callback when clear button is clicked.
showClearButton boolean false Shows clear button if input has value.

Example Usage

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
import { Input } from "@nomana-it/liberty-core"

export const InputExample = () => {
  const [text, setText] = useState("");

  return (
    <div style={{ display: "flex", flexDirection: "column", gap: "16px" }}>
      <Input id="outlined" label="Outlined Input" variant="outlined" />
      <Input id="filled" label="Filled Input" variant="filled" />
      <Input id="standard" label="Standard Input" variant="standard" />
      <Input 
        id="with-clear" 
        label="Clearable Input" 
        variant="outlined" 
        value={text} 
        showClearButton 
        onClear={() => setText("")} 
        onChange={(e) => setText(e.target.value)} 
      />
      <Input id="error" label="Error Input" variant="outlined" error helperText="This field is required" />
    </div>
  );
};

🔗 GitHub Repository (Core): Liberty Core
🔗 GitHub Repository (Test Project): Liberty Test
📖 Live Documentation: Liberty Core Docs
💖 Sponsor & Support: Sponsor Liberty Core