Search documentation v0.6.1

Input

Take user input with the help of input fields

Source ↗️ Report Issue ↗️

Input elements are crucial for creating interactive, functional, and user-friendly forms and interfaces. Use the Input component for data collection, such as text or email input, or use them for interactive experiences, such as search or filtering functionality.

The Input component can accept any native HTML attribute, along with some other custom props described in this documentation.

Preview
How to use Inputs in Astro
---
import { Input } from 'webcoreui/astro'
---
<Input
type="email"
placeholder="Please enter your email"
/>
How to use Inputs in Svelte
<script>
import { Input } from 'webcoreui/svelte'
</script>
<Input
type="email"
placeholder="Please enter your email"
/>
How to use Inputs in React
import React from 'react'
import { Input } from 'webcoreui/react'
const Component = () => (
<Input
type="email"
placeholder="Please enter your email"
/>
)
export default Component

Labeled Inputs

Inputs can also be created with labels using the label prop. Optionally, additional text can be displayed using the subText prop:

<Input
type="text"
placeholder="Provide a username"
label="Username"
/>
<Input
type="text"
placeholder="Provide a username"
label="Username"
subText="Please only use lowercase letters."
/>

Themes

Inputs come with five different built in themes that can be configured with the theme prop: info, success, warning, alert, and fill:

<Input placeholder="Default input without theme" />
<Input theme="info" placeholder="Theme set to info" />
<Input theme="success" placeholder="Theme set to success" />
<Input theme="warning" placeholder="Theme set to warning" />
<Input theme="alert" placeholder="Theme set to alert" />
<Input theme="fill" placeholder="Theme set to fill" />

Additional styles can be applied using the className prop.

Inputs with Icons

You can create inputs with icons by passing an SVG icon as the children to the component:

<Input placeholder="Please provide your GitHub username">
<Icon type="github" />
</Input>

To set the color of the icon, you can:

  1. Specify the color prop on the Icon component.
  2. Pass a className prop to the Input to style it via CSS.
  3. Pass a colored SVG icon as the children.

API

type InputProps = {
label?: string
subText?: string
className?: string
theme?: 'info'
| 'success'
| 'warning'
| 'alert'
| 'fill'
}
type SvelteInputProps = {
onChange?: (e: any) => any
onKeyUp?: (e: any) => any
} & InputProps
type ReactInputProps = {
onChange?: (e: any) => any
onKeyUp?: (e: any) => any
} & InputProps
The component also accepts native input attributes.
PropPurpose
label Set a label for the input.
subText Specify additional text below the input. The string can include HTML tags.
className Pass additional CSS classes for the input.
theme Specify the theme of the input.
Svelte & React PropPurpose
onChange Attach on-change event listeners.
onKeyUp Attach on-keyup event listeners.
onInput Attach on-input event listeners.

Request improvement for this page