Inputs Are Use To Accept Data From The User.Create simple input field, bordered input, borderless input field and round input field.
Input
To create input field
Prop | Description | Value(s) |
---|---|---|
`select` | To create select input | `Boolean` |
`options` | To create select options | `Array of objects with value and text as keys` |
`bordered` | To create bordered input | `Boolean` |
`borderless` | Remove default border from input | `Boolean` |
`fullWidth` | 100% width | `Boolean` |
`onChange` | To listern to change events | `function` |
`type` | Select input type | `<string>` |
`name` | Give a name for your input | `<string>` |
`label` | Your placeholder | `<string>` |
`defaultValue` | Set the default value | `string` |
`value` | Give a value to your input | `string` |
`multiline` | To create multiple line input | `Boolean` |
`rows` | set rows for a multiline input | `Int` |
`rounded` | Add border radius | `Boolean` |
`leftRounded` | Add border radius for only left | `Boolean` |
`rightRounded` | Add border radius for only right | `Boolean` |
`flat` | Remove border radius | `Boolean` |
`status` | To define the state of the input | `success , warning , danger` |
`id` | To set an id for the input | `String` |
#
Simple Input Field
The <Input /> is use to create a simple input field with a border at the bottom.
React / Next.js Show Source Code
#
Upload input
This input allows users to upload a file
React / Next.js Show Source Code
#
Multiple Line
Create a multiple line input with the multiline prop.
React / Next.js Show Source Code
#
Select Input
The select prop is used to create a select field.
React / Next.js Show Source Code
Iconic Input
This adds an icon to your input field
Prop | Description | Value(s) |
---|---|---|
`position` | To set the position of your icon | `left , right` |
`input` | To set an input field | `<input />` |
`icon` | To set the icon for the icon | `<Icon />` |
`iconicBg` | To set the background of your icon container | `funUi color` |
#
Iconic input
The Iconic input adds an icon to the input field
React / Next.js Show Source Code
#
Rounded Input
This adds a border radius to your input field
React / Next.js Show Source Code
#
Input With Status
The status prop is used to define the state of a user's activity. For Example, the success signifiers that the user has completed what the field requires.
React / Next.js Show Source Code