FormHeader
A standardised form or page header with a title, optional subtitle, and back navigation. Use at the top of create/edit form pages to maintain consistent visual structure.
📖 StorybookPreview
Live preview↗ Open in Storybook
Import
import { FormHeader } from "@xocialive/ui-components";
Basic usage
<FormHeader title="Create User" subtitle="Fill in the details below to add a new user." onBack={() => navigate(-1)} />
Props
| Prop | Type | Default | Description |
|---|---|---|---|
title | string | — | Page/form title |
subtitle | string | — | Descriptive sub-heading |
onBack | () => void | — | If provided, renders a back icon button |
actions | ReactNode | — | Extra controls in the trailing corner (e.g. a save button) |
sx | SxProps<Theme> | — | Root element style overrides |