Components
input

Input

Single-line text field for general data entry.

Demo

import { Input } from "@/components/jk/input"


export const InputDemo = () => {
    return (
        <form className="space-y-4 w-full">
            <Input placeholder="Start typing..." />
            <Input placeholder="Start typing..." variant="flush" className="bg-bg-subtle" />
        </form>
    )
}

Installation

terminal

npx shadcn@latest add @jk-ui/input

With label

import { Input } from "@/components/jk/input"


export const InputWithLabel = () => {
    return (
        <form className="space-y-4 w-full">
            <Input type="email" placeholder="Start typing..." label="Your Email" />
            <Input type="email" placeholder="Start typing..." inlinedLabel label="Your Email" labelClass="min-w-max" />
        </form>
    )
}

Input Group

Input groups allow you to compose inputs with leading or trailing elements such as icons, prefixes, suffixes, or actions.

When using <InputGroup> , the <Input> component must have variant prop to unstyled.

Always set variant='unstyled' to the input
Never pass label to the input
Styling and layout are handled by the group container

Leading

import { Input, InputGroup, InputLeading } from "@/components/jk/input"


export const InputGroupLeading = () => {
    return (
        <form className="space-y-4 w-full max-w-xs text-fg">
            <InputGroup>
                <Input variant="unstyled" type="email" placeholder="Your email here" className="ps-11 px-3" />
                <InputLeading absolute className="text-fg">
                    <span className="flex text-lg iconify ph--at"></span>
                </InputLeading>
            </InputGroup>
            <InputGroup>
                <Input variant="unstyled" type="text" placeholder="Your email here" className="ps-13 px-3" />
                <InputLeading absolute
                    className="text-sm text-fg">
                    CDF
                </InputLeading>
            </InputGroup>
            <InputGroup>
                <Input variant="unstyled" type="text" placeholder="my-website.com" className="ps-16 px-3" />
                <InputLeading absolute
                    className="text-sm text-fg">
                    https://
                </InputLeading>
            </InputGroup>
            <InputGroup className="flex">
                <InputLeading aria-hidden="true"
                    className="px-3 text-fg bg-bg-muted/80 rounded-l-ui">
                    <span className="flex text-lg iconify ph--at"></span>
                </InputLeading>
                <Input variant="unstyled" type="text" placeholder="Your email here" className="px-3" />
            </InputGroup>
        </form>

    )
}

Trailing

Trailing elements are commonly used for icons, units, or contextual hints. Use InputTrailing for this purpose.


import { Input, InputGroup, InputTrailing } from "@/components/jk/input"


export const InputGroupTrailling = () => {
    return (
        <form className="space-y-4 w-full max-w-xs text-fg">
            <InputGroup>
                <Input variant="unstyled" type="email" placeholder="Your email here" className="pe-11 px-3" />
                <InputTrailing absolute className="text-fg">
                    <span className="flex text-lg iconify ph--at"></span>
                </InputTrailing>
            </InputGroup>
            <InputGroup>
                <Input variant="unstyled" type="text" placeholder="Your email here" className="pe-13 px-3" />
                <InputTrailing absolute className="text-sm text-fg">
                    CDF
                </InputTrailing>
            </InputGroup>
            <InputGroup>
                <Input variant="unstyled" type="text" placeholder="Your email here" className="pe-16 px-3" />
                <InputTrailing absolute className="text-sm text-fg">
                    @gmail.com
                </InputTrailing>
            </InputGroup>
            <InputGroup>
                <Input variant="unstyled" type="text" placeholder="Your email here" className="rounded-r-none px-3 flex-1" />
                <InputTrailing className="px-3 text-fg bg-bg-muted/80 rounded-r-ui">
                    <span className="flex text-lg iconify ph--at"></span>
                </InputTrailing>
            </InputGroup>
        </form>

    )
}

In some cases, the trailing/leading element can be visually separated and styled as part of the control. As you can see in given examples.

Edit this page

Number Field

Input for numeric values with increment and decrement controls.