No Preview

Sorry, but you either have no stories or none are selected somehow.

If the problem persists, check the browser console, or the terminal you've run Storybook from.

The component failed to render properly, likely due to a configuration issue in Storybook. Here are some common causes and how you can address them:

  1. Missing Context/Providers: You can use decorators to supply specific contexts or providers, which are sometimes necessary for components to render correctly. For detailed instructions on using decorators, please visit the Decorators documentation.
  2. Misconfigured Webpack or Vite: Verify that Storybook picks up all necessary settings for loaders, plugins, and other relevant parameters. You can find step-by-step guides for configuring Webpack or Vite with Storybook.
  3. Missing Environment Variables: Your Storybook may require specific environment variables to function as intended. You can set up custom environment variables as outlined in the Environment Variables documentation.

InlineField

A basic component for rendering form elements, like Input, Select, Checkbox, 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>
NameDescriptionDefault
tooltip
Content for the label's tooltip
PopoverContent
-
labelWidth
Custom width for the label as a multiple of 8px
number"auto"
auto
grow
Make the field's child to fill the width of the row. Equivalent to setting flex-grow:1 on the field
boolean
-
shrink
Make the field's child shrink with width of the row. Equivalent to setting flex-shrink:1 on the field
boolean
-
transparent
Make field's background transparent
boolean
-
error
Error message to display
ReactNode
-
htmlFor

A unique id that associates the label of the Field component with the control with the unique id. If the htmlFor property is missing the htmlFor will be inferred from the id or inputId property of the first child. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label#attr-for

string
-
interactive
Make tooltip interactive
boolean
-
children*
Form input element, i.e Input or Switch
ReactElement<any, string | JSXElementConstructor<any>>
-
label
Label for the field
ReactNode
-
className
string
-
disabled
Indicates if field is disabled
boolean
-
invalid
Indicates if field is in invalid state
boolean
-
required
Indicates if field is required
boolean
-
loading
Indicates if field is in loading state
boolean
-
validationMessageHorizontalOverflow
make validation message overflow horizontally. Prevents pushing out adjacent inline components
boolean
-