Text5 checks

FormRichText

Formatted text, stored as HTML.

Example

Installation

bunx --bun shadcn@latest add @fieldkit/form-rich-text

Needs the @fieldkit registry. Add it once

Usage

Add the field to your schema

schema.ts

import { z } from "zod"import { richTextField } from "@/lib/field-schemas"
export const schema = z.object({  content: richTextField({ min: 20, max: 5000 }),})

Render it inside a Form

The name prop matches the schema key.

example-form.tsx

import { Form } from "@/components/form/form"import { FormRichText } from "@/components/form/form-rich-text"import { FormSubmit } from "@/components/form/form-submit"import { FieldGroup } from "@/components/ui/field"import { schema } from "./schema"
export function ExampleForm() {  return (    <Form      schema={schema}      defaultValues={{ content: "" }}      onSubmit={save}    >      <FieldGroup>        <FormRichText name="content" />        <FormSubmit>Save</FormSubmit>      </FieldGroup>    </Form>  )}

Checks

CheckOptionError message

Length of visible textmin, maxEnter at least 20 characters

Live countermaxNone

Empty editor saves as an empty stringdefaultNone

Image type and sizestorageUse an image under 5 MB

Images upload before the values savestorageCouldn't upload 1 image. Try again.

Best practices

Count characters the reader sees, not HTML tags
Show saved HTML with RichTextView, never with innerHTML
Check images and values again on the server with readSubmission

Try these values

Terminal

richTextField({ min: 20, max: 2000 })

Input	Result	Output
`"<p>Our <strong>solar kits</strong> ship nationwide.</p>"`	Valid	`"<p>Our <strong>solar kits</strong> ship nationwide.</p>"`
`"<p><strong>Short</strong></p>"`	Invalid	Enter at least 20 characters
`""`	Invalid	Enter at least 20 characters

API reference

FormRichText

PropDescription

imagesboolean = trueAllows images by URL, and by upload when the form has storage or onFileUpload.

videosboolean = trueShows Embed YouTube video.

filesboolean = trueAllows other files as attachment cards when the form has storage or onFileUpload.

onFileUpload(file: File) => Promise<string>Uploads this field's images and files on submit and returns each URL. Takes priority over form storage.

placeholderstringShown while the editor is empty.

disabledbooleanBlocks editing.

readOnlybooleanShows the content, no editing.

Field frame

PropDescription

namestringKey in the schema. Also picks the preset label and autocomplete.

labelReact.ReactNodeOverrides the preset label. Pass null to hide it.

descriptionReact.ReactNodeHint under the control.

requiredbooleanOverrides the asterisk read from the schema.

fieldPropsFormFieldPropsProps for the wrapping Field, such as className.

Add the field to your schema

Render it inside a Form

FormRichText

Field frame

Search docs