Input

Home Input

The Input component is a single-line text field used for collecting user input. It supports various states, sizes, and validation styles, making it essential for form interfaces.


<?php 

use Lib\PHPXUI\Input

?>

<Input type="email" placeholder="Email" />

Installation

npm

npx phpxui add Input

Usage

use Lib\PHPXUI\Input

<Input />

Examples

Disabled

<?php 

use Lib\PHPXUI\Input

?>

<Input disabled="true" type="email" placeholder="Email" />

File

Picture

<?php

use Lib\PHPXUI\{
    Input,
    Label
};

?>

<div class="grid w-full max-w-sm items-center gap-3">
    <Label for="picture">Picture</Label>
    <Input id="picture" type="file" />
</div>

With Label

<?php

use Lib\PHPXUI\{
    Input,
    Label
};

?>

<div class="grid w-full max-w-sm items-center gap-3">
    <Label for="email">Email</Label>
    <Input type="email" id="email" placeholder="Email" />
</div>

With Button

<?php

use Lib\PHPXUI\{
    Input,
    Button
};

?>

<div class="flex w-full max-w-sm items-center gap-2">
    <Input type="email" placeholder="Email" />
    <Button type="submit" variant="outline">
        Subscribe
    </Button>
</div>

Input const [copyName, setCopyName] = pp.state(false); const copyChildren = () => { navigator.clipboard.writeText('npx phpxui add Input'.trim()); setCopyName(true); setTimeout(() => { setCopyName(false); }, 2000); };