Inline Form Controls

When putting form controls (inputs, selects etc) inline with text, or in a center-aligned flex container with other elements, we may run into alignment issues when the form controls have labels, errors, or descriptions.

The presence of these labels or errors changes the dimensions of the form control's element, making it no longer aligned with the rest of the content as expected.

To support these scenarios, form control components accept a withCenterBaseline argument. Enabling it makes the components render a custom CSS grid, which makes the baseline of the form control component align with the baseline of text nodes.

The keyword baseline is important here: when using this option, all elements must either be inline elements, or must be placed in a flex container with a baseline alignment (not center).

This prop, along with the CenterBaseline component, allows us to correctly align text (and buttons, icons etc) with form elements, while maintaining correct alignment when those form elements are showing errors or labels.

import { 
	CenterBaseline,
	Icon, 
	InlineStack,
	Select,
	Text,
	TextField,
} from '@customerio/pluma-components/react';

export default function Example() {
	return <InlineStack alignBlock="baseline" gap="100">
		<Text>
			Leading text
		</Text>

		<Text>
			<CenterBaseline>
				<Icon name="table" />
			</CenterBaseline>
		</Text>

		<TextField 
			label="Test label" 
			placeholder="PlumaTextField" 
			withCenterBaseline={true}
		/>

		<TextField 
			ariaLabel="Test label" 
			placeholder="PlumaTextField" 
			withCenterBaseline={true}
		/>

		<Select 
			ariaLabel="Test label" 
			error="Test error message" 
			placeholder="PlumaSelect" 
			withCenterBaseline={true} 
		/>

		<Text>
			trailing text
		</Text>
	</InlineStack>;
}