InlineField
Much like the Field component, the InlineField offers an accessible way to label inputs but provides a different visual treatment. Inputs are given a subtle appearance, and the label and input appear on the same line.
InlineField accepts most of the Field component’s props, with the key exceptions being size (which is fixed at 'standard') and description.
Quick Start
- Installation
npm install @adaptavant/eds-core- Import
import { InlineField } from '@adaptavant/eds-core';
Label
Each InlineField must be accompanied by a label. Effective form labelling helps users understand what information to enter into an input.
Using placeholder text in lieu of a label is sometimes employed as a space-saving method. However, this is not recommended because it hides context and presents accessibility issues.
<InlineField label="First name">
<TextInput placeholder="Placeholder" />
</InlineField>Label visibility
The label must always be provided for assistive technology, but you may hide it from sighted users when the intent can be inferred from context.
<InlineField label="First name" labelVisibility="hidden">
<TextInput placeholder="Placeholder" />
</InlineField>Secondary label
Provide additional context, typically used to indicate that the field is optional.
<InlineField label="First name" secondaryLabel="(Optional)">
<TextInput placeholder="Placeholder" />
</InlineField>Error message
The errorMessage prop is used to provide users with more context as to why the field is invalid. This will be announced by screen readers on focus.
<InlineField
label="Email"
errorMessage="Enter an email address in the correct format, like name@example.com"
>
<TextInput type="email" />
</InlineField>Disabled
Use the isDisabled prop to show that a field isn't usable.
{/* isDisabled */}
<InlineField
label="First name"
isDisabled
>
<TextInput defaultValue="Disabled input" />
</InlineField>Style API
Our design system components include style props that allow you to easily customize different parts of each component to match your design needs.
Please refer to the Style API documentation for more insights.
InlineField parts
{/* Styling the label and input wrapper */}
<InlineField
className="border-2 border-primary rounded-lg px-2 py-2"
classNames={{
label: 'text-positive font-strong',
secondaryLabel: 'text-caution italic',
inputWrapper: 'gap-2'
}}
label="Email Address"
secondaryLabel="(required)"
>
<TextInput placeholder="Enter your email" />
</InlineField>
{/* Styling the error icon and error message */}
<InlineField
classNames={{
errorMessage: 'text-onPrimary font-stronger',
errorTrack: 'bg-critical px-2 py-1 rounded-lg',
errorIcon: 'fill-caution'
}}
errorMessage="Enter an email address in the correct format, like name@example.com"
>
<TextInput placeholder="Enter your email" />
</InlineField>
{/* Styling the counter component */}
<InlineField
className="w-full"
classNames={{
counter: 'text-positive'
}}
counter={{ maxValue: 100, value: 40, isAlwaysVisible: true }}
>
<TextInput placeholder="Enter your email" />
</InlineField>Stylable Parts | Description |
|---|---|
root | The outermost container of the InlineField component. |
label | The text that identifies the input field. |
secondaryLabel | Additional context for the label, typically used to indicate if a field is optional or required. |
labelWrapper | The container that wraps the label and secondary label. |
inputWrapper | The container that wraps the input component and any error messages or counter. |
errorTrack | The container for the error message and icon. |
errorIcon | The icon displayed when the field has an error. |
errorMessage | The text that displays the error message. |
counter | The component that displays the character count information. |