import { ArgTypes } from '@storybook/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

jsx

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