Control and label

Labels a text control, such as Input or Text area, with an optional description and error. For checkboxes, radios, and switches, use Selection control and label.

Display name

Shown to other workspace members.

Code

demo.tsx

import {ControlAndLabel, Input} from '@earendil-works/elanor-react';

export default function ControlAndLabelDemo() {
  return (
    <ControlAndLabel label="Display name" description="Shown to other workspace members.">
      <Input name="displayName" autoComplete="name" defaultValue="Alex Morgan" />
    </ControlAndLabel>
  );
}

Usage

import {ControlAndLabel, Input} from '@earendil-works/elanor-react';

<ControlAndLabel label="Display name" description="Shown to other workspace members.">
  <Input name="displayName" />
</ControlAndLabel>;

ControlAndLabel is shorthand for these Field parts. Use Field directly for a different order or one message per validation rule.

<Field.Root>
  <Field.Label>Display name</Field.Label>
  <Input name="displayName" />
  <Field.Description>Shown to other workspace members.</Field.Description>
  <Field.Error />
</Field.Root>

Error

error appears when the control fails native validation, such as required or type="email". Here, validation runs when focus leaves the field: focus it, then press Tab.

Code

error.tsx

import {ControlAndLabel, Input} from '@earendil-works/elanor-react';

export default function ControlAndLabelError() {
  return (
    <ControlAndLabel label="Email" error="Enter a valid email address." validationMode="onBlur">
      <Input type="email" name="email" defaultValue="alex@" />
    </ControlAndLabel>
  );
}

Disabled

disabled disables the label, description, and control together.

Workspace ID

Assigned when the workspace is created.

Code

disabled.tsx

import {ControlAndLabel, Input} from '@earendil-works/elanor-react';

export default function ControlAndLabelDisabled() {
  return (
    <ControlAndLabel
      label="Workspace ID"
      description="Assigned when the workspace is created."
      disabled
    >
      <Input name="workspaceId" defaultValue="workspace-2048" />
    </ControlAndLabel>
  );
}

API