import { ArgTypes } from '@storybook/addon-docs/blocks'; import { InlineField } from './InlineField';

InlineField

A basic component for rendering form elements, like Input, Checkbox, Combobox, etc, inline together with InlineLabel. If the child element has id specified, the label's htmlFor attribute, pointing to the id, will be added.

The width of the InlineLabel can be modified via labelWidth prop, which is a multiple of 8px. For example, an InlineField with labelWidth={20} will have a label 160px wide.

If tooltip prop is provided, an info icon with supplied tooltip content will be rendered inside the label.

Usage

<InlineField label="Inline field">
  <Input placeholder="Inline input" />
</InlineField>

FieldContext

InlineField provides a FieldContext that any descendant can read using the useFieldContext hook. This is the recommended way to access field state from a child component.

Example:

import { useFieldContext } from '@grafana/ui';

function MyCustomInput() {
  const { id, invalid, 'aria-labelledby': labelledby } = useFieldContext();
  return <input id={id} aria-invalid={invalid} aria-labelledby={labelledby} />;
}

// Usage:
<InlineField label="Threshold">
  <MyCustomInput />
</InlineField>;