Text Field

The Text Field is a simple single-line text input field component.

It’s included by default in the Headcode CMS Starter and uses the Input component from shadcn/ui under the hood (see: https://ui.shadcn.com/docs/components/input).

1. Installation

The Text Field is included in the Starter. No additional installation is required.

2. Basic Usage

You can use the TextField in your section definition to create a simple text input.

Example (hero.tsx):

hero.tsx

import { TextField } from '@/components/headcode/form/text-field'export const heroSection = {  name: 'hero',  label: 'Hero Section',  fields: {    title: TextField({      label: 'Title',    }),    // other fields...  },};

In the Headcode Admin, this will render a labeled text input field named title within the Hero Section. The entered value is stored and available as part of the section’s data object.

3. Options

The TextField function accepts several optional parameters for customizing its behavior.

Example:

hero.tsx

export const heroSection = {  name: 'hero',  label: 'Hero Section',  fields: {    title: TextField({      label: 'Title',      defaultValue: 'My Title',      validator: z.string().min(3).max(100),    }),  },};

4. Example: Rendering the Field

When you access the section data in your component, the text field’s value is included in the parsed data:

hero.tsx

export function Hero({ sectionData }: { sectionData: unknown }) {  const { data } = parseSectionData(heroSection.fields, sectionData);  return (    <div>      <h1>{data.title}</h1>    </div>  );}