# Field: HTML Content (category: special)

URL: https://docs.forms.saastro.io/docs/html

<FieldPreview name="html" description="Interactive demo of HTML content field" />

## Overview

The HTML field allows you to insert custom static content into your form. Use it for informational text, dividers, images, or any non-input content that needs to appear within the form flow.

## Usage

### Basic HTML Content

```tsx

const config = FormBuilder.create('form')
  .addField('notice', (f) =>
    f
      .type('html')
      .hideLabel()
      .value('<div class="p-4 bg-blue-50 rounded-lg"><p>Important information here</p></div>')
      .optional(),
  )
  .addStep('main', ['notice'])
  .build();
```

### Section Divider

```tsx
.addField('divider', (f) =>
  f.type('html')
    .hideLabel()
    .value('<hr class="my-4 border-t border-border" />')
    .optional()
)
```

### Informational Message

```tsx
.addField('legal', (f) =>
  f.type('html')
    .hideLabel()
    .value('<div class="rounded-md border p-4 text-sm text-muted-foreground bg-muted/50"><strong>Legal Notice:</strong> By continuing, you agree to our terms.</div>')
    .optional()
)
```

### JSON Configuration

```json
{
  "type": "html",
  "hideLabel": true,
  "content": "<div class=\"p-4 bg-blue-50 rounded\"><p>Important information here</p></div>"
}
```

## Props

| Prop        | Type                                                  | Default | Description                |
| ----------- | ----------------------------------------------------- | ------- | -------------------------- |
| `type`      | `'html'`                                              | -       | Field type (required)      |
| `label`     | `string`                                              | -       | Label (often hidden)       |
| `hideLabel` | `boolean`                                             | `false` | Hide the label             |
| `content`   | `string \| ReactNode`                                 | -       | HTML content to render     |
| `columns`   | `Partial<Record<Breakpoint, number>>`                 | -       | Grid columns by breakpoint |
| `hidden`    | `boolean \| function \| ConditionGroup \| Responsive` | `false` | Hide the field             |

## Use Cases

1. **Section headers**: Break forms into visual sections
2. **Help text**: Detailed instructions mid-form
3. **Legal notices**: Terms snippets
4. **Dividers**: Visual separation
5. **Images**: Inline graphics or diagrams

## Conditional Display

```tsx
.addField('premiumInfo', (f) =>
  f.type('html')
    .hideLabel()
    // Show only for premium users
    .hidden((values) => values.plan !== 'premium')
)
```

## No Validation

The HTML field is purely presentational and doesn't contribute to form data or validation. It's skipped during form submission.

## Styling

### Custom Classes

```tsx
.addField('notice', (f) =>
  f.type('html')
    .hideLabel()
    .optional()
    .classNames({
      wrapper: 'bg-blue-50 p-4 rounded-lg border border-blue-200',
    })
)
```

### Responsive Layout

```tsx
.addField('sidebar', (f) =>
  f.type('html')
    .hideLabel()
    .columns({ default: 12, md: 4 })
)
```

### JSON Styling

```json
{
  "type": "html",
  "hideLabel": true,
  "wrapper_className": "bg-blue-50 p-4 rounded-lg border border-blue-200",
  "columns": { "default": 12, "md": 6 },
  "content": "<div class=\"text-center\"><p class=\"font-semibold\">Important Notice</p></div>"
}
```

**Note:** HTML fields primarily use the `wrapper` class since there's no input element. The content itself should have its own inline styles or classes.

## Related Fields

All other fields are interactive. HTML is unique as a non-input field type.

## Accessibility

- Ensure HTML content is accessible
- Use semantic HTML elements
- Include proper headings hierarchy
- Add alt text for images