Label

The Label component renders a label element. It’s typically used with form fields, but can also be used standalone.

<div className="flex flex-col items-start gap-2">
  <Label>Standard Label</Label>
  <Label asterisk required>
    Required Field
  </Label>
</div>

Form Field Labels

Most form fields support a label prop that can be configured in multiple ways:

Use asterisk and required on form fields to show a required indicator next to the label.

To automatically show asterisks on all required fields, add this to your initialization code:

Label.prototype.asterisk = true;

The following example shows a styled label and a checkbox used as a label that enables/disables the field:

<LabelsTopLayout>
  <TextField
    value={m.name}
    label={{
      text: "Styled Label",
      style: "color: blue; font-weight: bold",
    }}
  />
  <TextField
    value={m.value}
    label={
      <Checkbox value={m.enabled} disabled={false}>
        Unique Name
      </Checkbox>
    }
    disabled={expr(m.enabled, (enabled) => !enabled)}
  />
</LabelsTopLayout>

interface PageModel {
  enabled: boolean;
  value: string;
  name: string;
}

const m = createModel<PageModel>();

import { createModel } from "cx/data";
import { LabelsLeftLayout, LabelsTopLayout, expr } from "cx/ui";
import { Checkbox, TextField } from "cx/widgets";

Configuration