Input

Take user input with the help of input fields

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.

---
import { Input } from 'webcoreui/astro'
---

<Input
    type="email"
    placeholder="Please enter your email"
/>

<script>
    import { Input } from 'webcoreui/svelte'
</script>

<Input
    type="email"
    placeholder="Please enter your email"
/>

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