euedujbarrios-uiby edujbarrios
Back to components

Inputs

Schema Field Row

A labeled schema input row for structured prompt builders and data-mapping interfaces.

schemafieldform

Installation

Copy and paste the code into your project.

Accessibility notes

The visible label names the input and the required badge is supplemented by text.

Preview accent

TypeScript
export function SchemaFieldRow() {
  return (
    <label className="grid w-full max-w-sm gap-2 rounded-lg border border-white/12 bg-[#0b0f14]/82 p-4 shadow-2xl">
      <span className="flex items-center justify-between gap-3">
        <span className="text-xs font-semibold uppercase tracking-[0.18em] text-[#40E0D0]">Field name</span>
        <span className="rounded-full bg-[#a78bfa]/12 px-2 py-0.5 text-[0.65rem] font-bold text-[#ddd6fe]">required</span>
      </span>
      <input
        className="rounded-md border border-white/10 bg-white/[0.05] px-3 py-2.5 text-sm text-white outline-none placeholder:text-slate-500 focus:border-[#40E0D0]/55"
        defaultValue="customer_segment"
      />
      <span className="text-xs text-slate-400">String - used by the recommendation model</span>
    </label>
  );
}
Usage
<SchemaFieldRow />

Related components

Inputs

AI Chat Input

Intermediate

A responsive prompt composer with textarea, label, and high-contrast send button.

aichatform
View component

Inputs

Neural Search Input

Beginner

A rounded search field for command palettes, component galleries, and prompt libraries.

searchcommandinput
View component

Inputs

File Dropzone

Intermediate

A drag-and-drop upload surface for assets, screenshots, and UI reference files.

uploadfiledropzone
View component