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>} />

<TextField label={<Label>Label</Label>} />

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> } /> </>

<>
    <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>} />

<TextField label={<Label renderIcon={() => <span className="icon-placeholder" />}>Test</Label>} />

Icon & Action

Result

Loading...

Live Editor

<TextField label={ <Label renderAction={() => <Link href="#">See more</Link>} renderIcon={() => <span className="icon-placeholder" />} > Test </Label> } />

<TextField
    label={
        <Label
            renderAction={() => <Link href="#">See more</Link>}
            renderIcon={() => <span className="icon-placeholder" />}
        >
            Test
        </Label>
    }
/>

CSS

## Props

<PropsTable name="Label" />