import { ComponentLinks, InteractiveCodeblock, PropsTable, Codeblock, } from "@/components/index";
The Input component is a text field used to get input from the user.
import {
Input,
InputBase,
InputPrefix,
InputSuffix,
useInputProps,
useInputState,
InputWrapper,
} from "@adaptui/react-tailwind";<Nextra.Callout> A complex component that supports customization as per the composition guide. </Nextra.Callout>
<InteractiveCodeblock
children={({ spreadProps }) => <Input placeholder="Search" ${spreadProps}/>}
booleanProps={["disabled", "invalid", "loading"]}
themeProps={{ variant: "input.variant", size: "input.size" }}
/>
Variants can be set using the variant prop. The default variant is outline.
The available variants are: outline subtle underline & ghost
<Codeblock live code={`
Sizes can be set using the size prop. The default size is md. The available
sizes are: sm md lg xl
<Codeblock live code={`
You can append or prepend any element inside Input. By default we don't give spacing to the elements so you have to add spacing as needed.
Prefix is positioned absolutely within the input.
<Codeblock live code={`
<PropsTable
data={[
{ name: "size", themeKey: "input.size", default: "md" },
{ name: "variant", themeKey: "input.variant", default: "outline" },
{
name: "disabled",
type: "boolean",
description: "If true, the Input will be disabled.",
default: "false",
},
{
name: "invalid",
type: "boolean",
description: "True, if the value of the input is invalid.",
default: "false",
},
{
name: "loading",
type: "boolean",
description: "True, if the input is loading.",
default: "false",
},
{
name: "prefix",
type: "React.ReactNode",
description: "Prefix for the Input",
},
{
name: "suffix",
type: "React.ReactNode",
description: "Suffix for the Input",
},
{
name: "spinner",
type: "React.ReactNode",
description: "Spinner component to display when loading.",
},
]} />