Docs
TextField
TextField
A text input that allow users to input custom text entries with a keyboard.
import { TextField, TextFieldRoot } from "@repo/tailwindcss/default/textfield";
const TextFieldDemo = () => {
return (
<TextFieldRoot class="w-full max-w-xs">
<TextField type="email" placeholder="Email" />
</TextFieldRoot>
);
};
export default TextFieldDemo;import { TextField, TextFieldRoot } from "@repo/tailwindcss/solid/textfield";
const TextFieldDemo = () => {
return (
<TextFieldRoot class="w-full max-w-xs">
<TextField type="email" placeholder="Email" />
</TextFieldRoot>
);
};
export default TextFieldDemo;Installation
npx shadcn-solid@latest add textfieldInstall the following dependencies:
npm install @kobalte/coreCopy and paste the following code into your project:
Install the following dependencies:
npm install @kobalte/coreCopy and paste the following code into your project:
Usage
import { TextField, TextFieldRoot } from "@/components/ui/textfield";<TextFieldRoot>
<TextField type="email" placeholder="Email" />
</TextFieldRoot>Examples
Disabled
import { TextField, TextFieldRoot } from "@repo/tailwindcss/default/textfield";
const TextFieldDisabled = () => {
return (
<TextFieldRoot disabled class="w-full max-w-xs">
<TextField type="email" placeholder="Email" />
</TextFieldRoot>
);
};
export default TextFieldDisabled;import { TextField, TextFieldRoot } from "@repo/tailwindcss/solid/textfield";
const TextFieldDisabled = () => {
return (
<TextFieldRoot disabled class="w-full max-w-xs">
<TextField type="email" placeholder="Email" />
</TextFieldRoot>
);
};
export default TextFieldDisabled;With Label
import {
TextField,
TextFieldLabel,
TextFieldRoot,
} from "@repo/tailwindcss/default/textfield";
const TextFieldWithLabel = () => {
return (
<TextFieldRoot class="w-full max-w-xs">
<TextFieldLabel>Email</TextFieldLabel>
<TextField type="email" placeholder="Email" />
</TextFieldRoot>
);
};
export default TextFieldWithLabel;import {
TextField,
TextFieldLabel,
TextFieldRoot,
} from "@repo/tailwindcss/solid/textfield";
const TextFieldWithLabel = () => {
return (
<TextFieldRoot class="w-full max-w-xs">
<TextFieldLabel>Email</TextFieldLabel>
<TextField type="email" placeholder="Email" />
</TextFieldRoot>
);
};
export default TextFieldWithLabel;With Text
import {
TextField,
TextFieldDescription,
TextFieldLabel,
TextFieldRoot,
} from "@repo/tailwindcss/default/textfield";
const TextFieldWithText = () => {
return (
<TextFieldRoot class="w-full max-w-xs">
<TextFieldLabel>Email</TextFieldLabel>
<TextField type="email" placeholder="Email" />
<TextFieldDescription>Enter your email address.</TextFieldDescription>
</TextFieldRoot>
);
};
export default TextFieldWithText;import {
TextField,
TextFieldDescription,
TextFieldLabel,
TextFieldRoot,
} from "@repo/tailwindcss/solid/textfield";
const TextFieldWithText = () => {
return (
<TextFieldRoot class="w-full max-w-xs">
<TextFieldLabel>Email</TextFieldLabel>
<TextField type="email" placeholder="Email" />
<TextFieldDescription>Enter your email address.</TextFieldDescription>
</TextFieldRoot>
);
};
export default TextFieldWithText;With Error
import {
TextField,
TextFieldErrorMessage,
TextFieldLabel,
TextFieldRoot,
} from "@repo/tailwindcss/default/textfield";
const TextFieldWithError = () => {
return (
<TextFieldRoot class="w-full max-w-xs" validationState="invalid">
<TextFieldLabel>Email</TextFieldLabel>
<TextField type="email" placeholder="Email" />
<TextFieldErrorMessage>Email is required.</TextFieldErrorMessage>
</TextFieldRoot>
);
};
export default TextFieldWithError;import {
TextField,
TextFieldErrorMessage,
TextFieldLabel,
TextFieldRoot,
} from "@repo/tailwindcss/solid/textfield";
const TextFieldWithError = () => {
return (
<TextFieldRoot class="w-full max-w-xs" validationState="invalid">
<TextFieldLabel>Email</TextFieldLabel>
<TextField type="email" placeholder="Email" />
<TextFieldErrorMessage>Email is required.</TextFieldErrorMessage>
</TextFieldRoot>
);
};
export default TextFieldWithError;With Button
import { Button } from "@repo/tailwindcss/default/button";
import { TextField, TextFieldRoot } from "@repo/tailwindcss/default/textfield";
const TextFieldWithButton = () => {
return (
<div class="flex w-full max-w-sm items-center space-x-2">
<TextFieldRoot class="w-full">
<TextField type="email" placeholder="Email" />
</TextFieldRoot>
<Button type="button">Subscribe</Button>
</div>
);
};
export default TextFieldWithButton;import { Button } from "@repo/tailwindcss/solid/button";
import { TextField, TextFieldRoot } from "@repo/tailwindcss/solid/textfield";
const TextFieldWithButton = () => {
return (
<div class="flex w-full max-w-sm items-center space-x-2">
<TextFieldRoot class="w-full">
<TextField type="email" placeholder="Email" />
</TextFieldRoot>
<Button type="button">Subscribe</Button>
</div>
);
};
export default TextFieldWithButton;File
import {
TextField,
TextFieldLabel,
TextFieldRoot,
} from "@repo/tailwindcss/default/textfield";
const TextFieldFile = () => {
return (
<TextFieldRoot disabled class="w-full max-w-xs">
<TextFieldLabel>Picture</TextFieldLabel>
<TextField type="file" />
</TextFieldRoot>
);
};
export default TextFieldFile;import {
TextField,
TextFieldLabel,
TextFieldRoot,
} from "@repo/tailwindcss/solid/textfield";
const TextFieldFile = () => {
return (
<TextFieldRoot disabled class="w-full max-w-xs">
<TextFieldLabel>Picture</TextFieldLabel>
<TextField type="file" />
</TextFieldRoot>
);
};
export default TextFieldFile;