Skip to content

Input

A form control that allows users to enter and edit text data.

Example

A basic implementation of the Input component with default styling.

import { Input } from "@yummacss/ui";
export default function Page() {
return <Input variant="base" type="email" placeholder="john@example.com" />;
};

API reference

The Input component can be adapted to suit specific requirements by utilizing the internal API of Yumma UI, thereby enabling the modification of its visual appearance and operational characteristics.

variant

Default value is base

(property) variant?: "base" | "error" | null | undefined

Custom styling

Apply custom styles to the <Input> component.

import { Input } from "@yummacss/ui";
<Input className="..." />

Extend properties

Extend the Input component with the Base UI API.

import { Input } from "@yummacss/ui";
<Input {...props} />