Inputs COPY-READY COMPONENT

Text input

Labeled text field with controlled input and helpful description.

SOURCE INCLUDEDBrowse library

Component studio/ text-field

PREVIEW SOURCE

PreviewINTERACTIVE

Loading Zidom preview…

Try the component here. Changes stay in your browser.

Source codeREAD ONLY / COPY READY

text-field.tsx

TSX

Copy this exact source file into your Zidom project.

text-field.tsx

● Zidom

import { signal } from '@zidomjs/core';type TextFieldProps = {  id: string;  label: string;  value: string;  onChange: (next: string) => void;  hint?: string;};export function TextField({ id, label, value, onChange, hint }: TextFieldProps) {  return <div className="zb-field">    <label htmlFor={id}>{label}</label>    <input id={id} type="text" value={value} placeholder="e.g. Alex Morgan"      aria-describedby={hint ? id + '-hint' : undefined}      onInput={(e: Event) => onChange((e.currentTarget as HTMLInputElement).value)}/>    {hint ? <small id={id + '-hint'}>{hint}</small> : null}  </div>;}export default function TextFieldPreview() {  const name = signal('');  return <div className="zb-stack">    <TextField id="zb-name" label="Full name" value={name.value}      onChange={next => name.value = next} hint="This will appear on your profile."/>    <p className="zb-caption" role="status">Hello, {() => name.value || 'friend'}!</p>  </div>;}

text-field.css

CSS

Copy this exact source file into your Zidom project.

text-field.css

● Zidom

.zb-field{display:flex;flex-direction:column;gap:8px;width:min(100%,340px)}.zb-field label{font-weight:700;font-size:13px;color:var(--ink)}.zb-field input,.zb-field select,.zb-field textarea{display:block;width:100%;min-height:43px;padding:10px 12px;border-radius:9px;border:1px solid var(--line);background:var(--bg);color:var(--ink);font:inherit;font-size:13px}.zb-field input:focus-visible,.zb-field textarea:focus-visible{outline:2px solid #3a72ef;outline-offset:2px}.zb-field small{font-size:12px;color:var(--muted)}.zb-stack{display:flex;flex-direction:column;gap:14px;align-items:flex-start}.zb-caption{margin:0;color:var(--muted);font-size:12px}

YOUR NEXT STEP

Make it yours.

Everything you see above is real Zidom code. Choose a source file, copy it, and adapt it in your project.

Copy the TSX and CSS from their respective tabs. Add both files to your project and import the stylesheet. TypeScript must use jsxImportSource: "@zidomjs/dom" with the Zidom Vite plugin. Setup guide →

← Explore more components Report an issue ↗