<Input />

A native text input that works inside a Field. The Input component extends Base UI's Input. It styles the native text control, and Field.Control renders it, so both share one look.

Here is the component implementation code that you can copy to your project:

// https://devie-ui.com/components/input
// https://base-ui.com/react/components/input
 
import { Input as BaseInput } from "@base-ui/react/input";
import clsx from "clsx";
import styles from "./Input.module.scss";
 
function Input({ className, ...props }: Input.Props) {
  return <BaseInput className={clsx(styles.input, className)} {...props} />;
}
 
namespace Input {
  export type Props = BaseInput.Props;
  export type State = BaseInput.State;
  export type ChangeEventDetails = BaseInput.ChangeEventDetails;
}
 
export default Input;

Simple input

Render Input with any native attribute such as placeholder or type.

Controlled value

Pass value and onValueChange to control the input. Use defaultValue for an uncontrolled input.

Disabled state

Set disabled to prevent editing.

With Field

Place Input inside Field.Root to add a label, a description, and validation. See Field for the validation modes.