Form group

A FormGroup gives a form control a label, helper text and consistent spacing. Use it for every labeled field, from a plain InputGroup to a ControlGroup.

Usage#

import { FormGroup } from "@clawscale/react";

<FormGroup label="Pipeline name" labelFor="pipeline-name">
  <InputGroup id="pipeline-name" />
</FormGroup>

Examples#

Basic#

Set labelFor to the control's id. A click on the label then focuses the control.

Pipeline name

core/form-group/basic.tsx

import { FormGroup, InputGroup } from "@clawscale/react";

export default function FormGroupBasic() {
  return (
    <FormGroup label="Pipeline name" labelFor="form-group-pipeline">
      <InputGroup id="form-group-pipeline" placeholder="orders-daily-ingest" />
    </FormGroup>
  );
}

Label info#

labelInfo adds muted text after the label. subLabel adds a line between the label and the control.

Owner (required)

Receives failure alerts for this pipeline.

core/form-group/label-info.tsx

import { FormGroup, InputGroup } from "@clawscale/react";

export default function FormGroupLabelInfo() {
  return (
    <FormGroup
      label="Owner"
      labelFor="form-group-owner"
      labelInfo="(required)"
      subLabel="Receives failure alerts for this pipeline."
    >
      <InputGroup id="form-group-owner" placeholder="data-platform@example.com" />
    </FormGroup>
  );
}

Helper text#

helperText renders below the control. Use it for formats, limits and consequences.

Schedule

Cron expression in UTC. Leave empty to run on demand.

core/form-group/helper-text.tsx

import { FormGroup, InputGroup } from "@clawscale/react";

export default function FormGroupHelperText() {
  return (
    <FormGroup
      helperText="Cron expression in UTC. Leave empty to run on demand."
      label="Schedule"
      labelFor="form-group-schedule"
    >
      <InputGroup id="form-group-schedule" defaultValue="0 3 * * *" />
    </FormGroup>
  );
}

Intent#

intent colors the helper text only. Set the same intent on the control.

Retention (days)

Under 30 days breaks monthly reports.

Output path

Paths start with s3://

core/form-group/intent.tsx

import { FormGroup, InputGroup } from "@clawscale/react";

export default function FormGroupIntent() {
  return (
    <>
      <FormGroup
        helperText="Under 30 days breaks monthly reports."
        intent="warning"
        label="Retention"
        labelFor="form-group-retention"
        labelInfo="(days)"
      >
        <InputGroup id="form-group-retention" intent="warning" defaultValue="14" />
      </FormGroup>
      <FormGroup helperText="Paths start with s3://" intent="danger" label="Output path" labelFor="form-group-output">
        <InputGroup id="form-group-output" intent="danger" defaultValue="warehouse/raw/orders" />
      </FormGroup>
    </>
  );
}

Inline#

inline puts the label and the control on one line. Use it in toolbars and dense settings panels.

Region

Rows per page

core/form-group/inline.tsx

import { FormGroup, HTMLSelect } from "@clawscale/react";

export default function FormGroupInline() {
  return (
    <>
      <FormGroup inline label="Region" labelFor="form-group-region">
        <HTMLSelect id="form-group-region" options={["eu-west-1", "us-east-1", "ap-southeast-2"]} />
      </FormGroup>
      <FormGroup inline label="Rows per page" labelFor="form-group-rows">
        <HTMLSelect id="form-group-rows" defaultValue={100} options={[50, 100, 500, 1000]} />
      </FormGroup>
    </>
  );
}

Disabled#

disabled dims the label and helper text. Disable the control separately.

Source table

Locked while the backfill runs.

core/form-group/disabled.tsx

import { FormGroup, InputGroup } from "@clawscale/react";

export default function FormGroupDisabled() {
  return (
    <FormGroup disabled helperText="Locked while the backfill runs." label="Source table" labelFor="form-group-source">
      <InputGroup disabled id="form-group-source" defaultValue="analytics.events_raw" />
    </FormGroup>
  );
}

Interactive playground#

View source on GitHub

Props interface#

FormGroup also accepts the HTML attributes of a <div>.

interface FormGroupProps extends IntentProps, Props, HTMLDivProps@clawscale/react

Props	Description
`children`	`React.ReactNode` Group contents.
`className`	`string` A space-delimited list of class names to pass along to a child element. Inherited from `Props`
`contentClassName`	`string` A space-delimited list of class names to pass along to the `Classes.FORM_CONTENT` element that contains `children`.
`disabled`	`boolean` Whether form group should appear as non-interactive. Remember that `input` elements must be disabled separately.
`fill`	`boolean` Whether the component should take up the full width of its container.
`helperText`	`React.ReactNode` Optional helper text. The given content will be wrapped in `Classes.FORM_HELPER_TEXT` and displayed beneath `children`. Helper text color is determined by the `intent`.
`inline`	`boolean` Whether to render the label and children on a single line.
`intent`	`Intent` Visual intent to apply to helper text and sub label. Note that child form elements need to have their own intents applied independently.
`label`	`React.ReactNode` Label of this form group.
`labelFor`	`string` `id` attribute of the labelable form element that this `FormGroup` controls, used as `<label for>` attribute.
`labelInfo`	`React.ReactNode` Optional secondary text that appears after the label.
`style`	`React.CSSProperties` CSS properties to apply to the root element.
`subLabel`	`React.ReactNode` Optional text for `label`. The given content will be wrapped in `Classes.FORM_GROUP_SUB_LABEL` and displayed beneath `label`.