euedujbarrios-ui
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

Auto-run evals

Start checks whenever a prompt version changes.

Inputs

Toggle Setting Row

Beginner

A settings row with a clear label, helper text, and active toggle state.

togglesettingsform
View component

Use environment variables in production.

Inputs

API Key Field

Beginner

A guarded credential input for settings screens, integrations, and developer tools.

apisecuritysettings
View component