Input

The Input component is used to get user input in a text field.

Import

import { Input } from "valliumui";

Usage

<Input placeholder="enter text here"/>

Input `variant`

Use the variant property to change the visual style of the Input. Valid values are outlined, filled.

<Card gap="4">
    <Input variant="outlined" placeholder="i am a outlined input field"/>
    <Input variant="filled" placeholder="i am a filled input field"/>
</Card>

Input addons

You can add addons to the left and right of any Input component.

Simply import the addons and the InputGroup component.

import { Input, InputAddonLeft, InputAddonRight, InputGroup } from "valliumui";

Left

https://

.com

<Card gap="4">
    <InputGroup>
        <InputAddonLeft>Left</InputAddonLeft>
        <Input placeholder="there could be the right addon ->"/>
    </InputGroup>
    <InputGroup>
        <InputAddonLeft>https://</InputAddonLeft>
        <Input placeholder="website"/>
        <InputAddonRight>.com</InputAddonRight>
    </InputGroup>
</Card>

Input addons as buttons

You can pass the button property to an addon to make it look like a button.

import { useState } from "react";
 
const [value, setValue] = useState("");
const handleChange = (event) => setValue(event.target.value);
const handleClick = () => alert(value);
 
return (
<Card gap="4">
    <InputGroup>
        <InputItemLeft>-&gt;</InputItemLeft>
        <Input onChange={handleChange} value={value} placeholder="Enter some text"/>
        <InputAddonRight disabled={value.length === 0} button onClick={handleClick}>Print</InputAddonRight>
    </InputGroup>
</Card>
);

Input items

Similar to addons, you can add items to the left and right of any Input component.

Items will not like addons added to the outside, but on the inside of the input component.

Simply import the items and the InputGroup component.

import { Input, InputItemLeft, InputItemRight, InputGroup } from "valliumui";

,00

<Card gap="4">
    <InputGroup>
        <InputItemLeft>$</InputItemLeft>
        <Input placeholder="there could be the right addon ->"/>
    </InputGroup>
    <InputGroup>
        <InputItemLeft>$</InputItemLeft>
        <Input placeholder="price"/>
        <InputItemRight>,00</InputItemRight>
    </InputGroup>
</Card>

Combining addons and items

You can combine addons and items however you want to.

Price

€

Price

<Card gap="4">
    <InputGroup>
        <InputItemLeft>-&gt;</InputItemLeft>
        <Input placeholder="item and addon combined!"/>
        <InputAddonRight button>Go</InputAddonRight>
    </InputGroup>
    <InputGroup>
        <InputAddonLeft>Price</InputAddonLeft>
        <Input placeholder="also works swapped!"/>
        <InputItemRight>€</InputItemRight>
    </InputGroup>
    <InputGroup>
        <InputAddonLeft>Price</InputAddonLeft>
        <InputItemLeft>=</InputItemLeft>
        <Input placeholder="works also combined!"/>
        <InputItemRight>$</InputItemRight>
        <InputAddonRight button>Search</InputAddonRight>
    </InputGroup>
</Card>

Controlled Example

This is a example to create a simple input and display the value of the input somewhere else.

Value of input:

import { useState } from "react";
 
const [value, setValue] = useState("");
const handleChange = (event) => setValue(event.target.value);
 
<Card flex direction="col" gap="4">
    <Text>Value of input: {value}</Text>
    <Input onChange={handleChange} value={value} placeholder="Enter some text"/>
</Card>

Password Example

This is a example to create a simple password input with the functionality to hide and show the input.

Show

import { useState } from "react";
 
const [show, setShow] = useState(false);
const handleClick = () => setShow(!show);
 
<Card>
    <InputGroup>
        <Input type={show ? "text" : "password"} placeholder="Enter password"/>
        <InputAddonRight className="select-none cursor-pointer" onClick={handleClick}>
            {show ? "Hide" : "Show"}
        </InputAddonRight>
    </InputGroup>
</Card>

Other Input types

There are other input types such as dateTime, color, search, file etc. you can also use.

Type: dateTime-local

<Card flex direction="col" gap="4">
    <Text>Type: `dateTime-local`</Text>
    <Input type="datetime-local"/>
</Card>

Type: color

Select color:

<Card flex direction="col" gap="4">
    <Text>Type: `color`</Text>
    <InputGroup>
        <InputAddonLeft>Select color:</InputAddonLeft>
        <Input className="w-14" type="color"/>
    </InputGroup>
</Card>

Type: file

<Card flex direction="col" gap="4">
    <Text>Type: `file`</Text>
    <Input type="file"/>
</Card>

Button