Elanor

Selection control and label

Last updated

Places a Checkbox, Radio, or Switch next to its label and makes the label clickable. For text inputs, use Control and label.

Code
demo.tsx 
import {Checkbox, SelectionControlAndLabel} from '@earendil-works/elanor-react';

export default function SelectionControlAndLabelDemo() {
  return (
    <SelectionControlAndLabel
      control={
        <Checkbox.Root defaultChecked>
          <Checkbox.Indicator />
        </Checkbox.Root>
      }
    >
      Email notifications
    </SelectionControlAndLabel>
  );
}

Usage

import {Checkbox, SelectionControlAndLabel} from '@earendil-works/elanor-react';

<SelectionControlAndLabel
  control={
    <Checkbox.Root>
      <Checkbox.Indicator />
    </Checkbox.Root>
  }
>
  Email notifications
</SelectionControlAndLabel>;

It renders a <label> around the control, so clicking the text toggles it. Disabling the control dims the label too.

Long labels

Long labels wrap; the control stays aligned with the first line.

Code
long-label.tsx 
import {Checkbox, SelectionControlAndLabel} from '@earendil-works/elanor-react';

export default function SelectionControlAndLabelLongLabel() {
  return (
    <SelectionControlAndLabel
      control={
        <Checkbox.Root>
          <Checkbox.Indicator />
        </Checkbox.Root>
      }
    >
      Send me a weekly summary of project activity, including comments, assignments, and upcoming
      deadlines.
    </SelectionControlAndLabel>
  );
}

API

SelectionControlAndLabel

PropTypeDefaultDescription
controlrequiredReactNode-A Checkbox, Radio, or Switch.
childrenrequiredReactNode-The label text.

Renders <label>. Also accepts its HTML attributes and ref.

↑↓to select↵to openEscto close