Input

Allows users to input data into a form.

 
import Input from "@tailus-ui/Input";

const Overview = () => (
    <div className="max-w-xs space-y-6">
        <Input variant="plain" placeholder="Enter your name" />
        <Input variant="soft" placeholder="Enter your name"/>
        <Input variant="outlined" placeholder="Enter your name"/>
        <Input variant="mixed" placeholder="Enter your name"/>
        <Input variant="bottomOutlined" placeholder="Enter your name"/>
    </div>
)

Installation

Copy-Paste the component code in a .tsx file.

import React from 'react';
import {
    form,
    type InputProps as InputVariants,
} from "@tailus/themer"

export interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'>, InputVariants {}

export const Input = React.forwardRef<
  HTMLInputElement, InputProps>(({ variant="mixed", fancy=false, className, size="md", ...props }, forwardedRef) => {
    const { input } = form();

    if ((variant === "bottomOutlined" || variant === "plain") && fancy) {
      throw Error("Fancy is not supported with the bottomOutlined or plain variant !");
    }

    return (
      <input
        ref={forwardedRef}
        className={input({ variant, fancy, size, className})}
        {...props}
      />
    );
});

export default Input

Usage

Import the Input component and build your form.

import Input from "@tailus-ui/Input";

const Overview = () => (
    <div className="max-w-xs space-y-6">
        <Input variant="plain" placeholder="Enter your name" />
        <Input variant="soft" placeholder="Enter your name"/>
        <Input variant="outlined" placeholder="Enter your name"/>
        <Input variant="mixed" placeholder="Enter your name"/>
        <Input variant="bottomOutlined" placeholder="Enter your name"/>
    </div>
)

Reference

Input

The input field component

Prop
Type
Default
variant
enum
mixed
size
enum
md
fancy
boolean
false

Examples

With Label

 
import Label from "@tailus-ui/Label";
import Input from "@tailus-ui/Input";

const WithLabel = () => (
    <div className="space-y-2">
        <Label htmlFor="name">Name</Label>
        <Input id="name" />
    </div>
)

With Caption

Enter your name

 
import Label from "@tailus-ui/Label";
import Input from "@tailus-ui/Input";
import { Caption } from "@tailus-ui/typography";

const WithLabel = () => (
    <div className="space-y-2">
        <Label htmlFor="name2">Name</Label>
        <Input id="name2" />
        <Caption>Enter your name</Caption>
    </div>
)

Disabled

Enter your name

 
import Label from "@tailus-ui/Label";
import Input from "@tailus-ui/Input";
import { Caption } from "@tailus-ui/typography";

const WithLabel = () => (
    <div className="space-y-2 *:has-[:disabled]:opacity-50 *:has-[:disabled]:pointer-events-none">
        <Label htmlFor="name3">Name</Label>
        <Input disabled id="name3" />
        <Caption>Enter your name</Caption>
    </div>
)

Sizes

 
import Input from "@tailus-ui/Input";

const WithLabel = () => (
    <div className="space-y-4">
        <Input size="sm" />
        <Input size="md" />
        <Input size="lg" />
        <Input size="xl" />
    </div>
)