Skip to main content

Label

The Label component can be used to augment the display of a label for a form field. Unlike providing a label string to the form field, the Label component allows for more complex label content, such as links or icons. With default styles applied to each section. Content within the render functions will also be truncated to ellipsis.

Result
Loading...
Live Editor
<TextField label={<Label>Label</Label>} />

Helper​

Result
Loading...
Live Editor
<TextField label={<Label renderHelper={() => 'Helper Text'}>Label</Label>} className="mb-4" />

Action​

Result
Loading...
Live Editor
<>
	<TextField
		label={<Label renderAction={() => <Link href="#">See more</Link>}>Label</Label>}
		className="mb-4"
	/>
	<TextField
		label={
			<Label
				renderAction={() => (
					<Button variant="link" className="p-0">
						See more
					</Button>
				)}
			>
				Label
			</Label>
		}
	/>
</>

Icon​

Result
Loading...
Live Editor
<TextField label={<Label renderIcon={() => <span className="icon-placeholder" />}>Test</Label>} />

Helper, Icon, & Action​

Result
Loading...
Live Editor
<TextField
	label={
		<Label
			renderHelper={() => 'Helper Text'}
			renderAction={() => <Link href="#">See more</Link>}
			renderIcon={() => <span className="icon-placeholder" />}
		>
			Test
		</Label>
	}
/>

Props​