Get started →

    Field

    The <Field> component documents a single parameter or property with a monospace name, type badge, required/optional/deprecated status, optional default value, and description body. Wrap related fields in <FieldGroup> to create titled sections, with optional collapsible behavior for nested objects and arrays.

    Basic fields

    Code

    import { Field, FieldGroup } from '@theme'

<FieldGroup title="Parameters">
  <Field name="name" type="string" required>
    The user's display name.
  </Field>
  <Field name="email" type="string" required>
    A valid email address used for login and notifications.
  </Field>
  <Field name="bio" type="string">
    Short biography shown on the user's profile page.
  </Field>
</FieldGroup>

    Output

    Parameters
    namestringrequired

    The user's display name.

    emailstringrequired

    A valid email address used for login and notifications.

    biostringoptional

    Short biography shown on the user's profile page.

    Required and optional

    Code

    <FieldGroup title="Request body">
  <Field name="title" type="string" required>
    The document title. Must be unique within the project.
  </Field>
  <Field name="tags" type="string[]">
    Optional list of tags for categorization.
  </Field>
</FieldGroup>

    Output

    Request body
    titlestringrequired

    The document title. Must be unique within the project.

    tagsstring[]optional

    Optional list of tags for categorization.

    With default values

    Code

    <FieldGroup title="Options">
  <Field name="port" type="number" defaultValue="3000">
    Port number for the development server.
  </Field>
  <Field name="theme" type="string" defaultValue="default">
    Theme identifier to apply to the documentation site.
  </Field>
</FieldGroup>

    Output

    Options
    portnumberoptional
    Default: 3000

    Port number for the development server.

    themestringoptional
    Default: default

    Theme identifier to apply to the documentation site.

    Deprecated field

    Code

    <FieldGroup title="Configuration">
  <Field name="outputDir" type="string" deprecated>
    Use `outDir` instead. This field will be removed in v3.
  </Field>
  <Field name="outDir" type="string" defaultValue="dist">
    Directory for build output.
  </Field>
</FieldGroup>

    Output

    Configuration
    outputDirstringdeprecated

    Use outDir instead. This field will be removed in v3.

    outDirstringoptional
    Default: dist

    Directory for build output.

    Nested object

    Use an expandable <FieldGroup> inside a <Field> to document object-typed properties.

    Code

    <FieldGroup title="Parameters">
  <Field name="config" type="object" required>
    Top-level configuration object.
    <FieldGroup title="Properties" expandable>
      <Field name="theme" type="string" defaultValue="default">
        Theme name to apply.
      </Field>
      <Field name="port" type="number" defaultValue="3000">
        Dev server port.
      </Field>
    </FieldGroup>
  </Field>
</FieldGroup>

    Output

    Parameters
    configobjectrequired

    Top-level configuration object.

    themestringoptional
    Default: default

    Theme name to apply.

    portnumberoptional
    Default: 3000

    Dev server port.

    Nested array

    For array types, nest a <FieldGroup> describing the shape of each array item.

    Code

    <FieldGroup title="Response">
  <Field name="users" type="User[]" required>
    List of matching user records.
    <FieldGroup title="Array items" expandable>
      <Field name="id" type="string" required>
        Unique user identifier.
      </Field>
      <Field name="name" type="string" required>
        Display name.
      </Field>
      <Field name="role" type="string" defaultValue="viewer">
        Access level within the organization.
      </Field>
    </FieldGroup>
  </Field>
</FieldGroup>

    Output

    Response
    usersUser[]required

    List of matching user records.

    idstringrequired

    Unique user identifier.

    namestringrequired

    Display name.

    rolestringoptional
    Default: viewer

    Access level within the organization.

    CLI options

    <Field> also works well for documenting command-line flags.

    Code

    <FieldGroup title="CLI Options">
  <Field name="--output" type="string" defaultValue="dist">
    Output directory for generated files.
  </Field>
  <Field name="--verbose" type="boolean" defaultValue="false">
    Enable verbose logging output.
  </Field>
  <Field name="--config" type="string">
    Path to a custom configuration file.
  </Field>
</FieldGroup>

    Output

    CLI Options
    --outputstringoptional
    Default: dist

    Output directory for generated files.

    --verbosebooleanoptional
    Default: false

    Enable verbose logging output.

    --configstringoptional

    Path to a custom configuration file.

    Deep nesting

    Tip

    For objects nested deeper than two levels, consider linking to a dedicated reference page instead of inlining everything. Deeply nested expandable groups become hard to scan and navigate.

    Field props

    PropTypeRequiredDefaultDescription
    namestringyes---Field name, rendered in monospace bold
    typestringno---Type annotation shown as a pill badge
    requiredbooleannofalseShows a "required" badge instead of "optional"
    deprecatedbooleannofalseShows a "deprecated" badge and strikes through the name
    defaultValuestringno---Default value displayed below the header row
    childrenReactNodeyes---Description text and optional nested FieldGroup

    FieldGroup props

    PropTypeRequiredDefaultDescription
    titlestringyes---Group label displayed as a header or collapsible trigger
    expandablebooleannofalseRenders as a collapsible section with a toggle trigger
    defaultOpenbooleannofalseInitial expanded state when expandable is true
    childrenReactNodeyes---Field children to display within the group