Input

Forms

A borderless text field with a solid fill and a soft focus ring.

Live preview

We'll never share it.

With error

This field is required

Installation

Import the component from the kit. The package ships source and is transpiled by Next.js.

Import

import { Field, Input } from "@nphuonha/ui-kit";

Usage

Compose the component with your own content. All controls share the same focus, disabled and invalid states.

Usage

import { Field, Input } from "@nphuonha/ui-kit";

<Field label="Email" description="We'll never share it.">
  <Input placeholder="[email protected]" type="email" />
</Field>

API Reference

Props are additive to the underlying Base UI or native element.

Prop	Type	Default	Description
type	string	"text"	Native input type.
error	boolean	—	Applies the invalid visual state.
placeholder	string	—	Hint text when empty.
disabled	boolean	—	Disables the field.