Input group

Documentation

All components Component Brickwork 4.3.1

Try it

Currency amount

Open full-page preview

A field widget with a currency prefix.

Use for units, currency prefixes, URL schemes, and similar context that belongs adjacent to a form control.

Use it

Working invocation

This code creates the configuration shown above. Copy the template and the required Python context together.

{% load brickwork_forms %}
{% bw_field_widget form.amount as amount_field %}
{% include "brickwork/components/_input_group.html" with field=amount_field prefix=prefix %}

from django import forms
class _AmountForm(forms.Form):
    amount = forms.DecimalField(label="Amount", initial="24.00", decimal_places=2, max_digits=8)
__FORM__ = _AmountForm()
context = {'prefix': '£'}
context['form'] = __FORM__

Guide

Add it to your project

Render a bound field widget into `field`, or extend and fill the field block.
Supply at least one prefix or suffix addon.
Use `aria_label` only when the normal field label does not name the composed group.

View this component's source for the installed release

Options

Public API

Option	Type	Default	Required	Description
field	SafeString\|template block	Not set	Yes	Pre-rendered field control or filled field block. Constraint: Pass a Django BoundField from the form being rendered; do not substitute a raw string or unrelated widget markup.
prefix	str	Not set	No	Leading visible text. Constraint: No additional package-level validation is documented beyond this option's stated type and its role in the component.
suffix	str	Not set	No	Trailing visible text. Constraint: No additional package-level validation is documented beyond this option's stated type and its role in the component.
prefix_icon	str	Not set	No	Leading decorative icon. Constraint: No additional package-level validation is documented beyond this option's stated type and its role in the component.
suffix_icon	str	Not set	No	Trailing decorative icon. Constraint: No additional package-level validation is documented beyond this option's stated type and its role in the component.
aria_label	str	Not set	No	Group name when needed. Constraint: Use a concise non-empty accessible name whenever the visible label does not name the control.

Named blocks

Fill these only when you extend the component template. They are not values passed to an include or tag.

Block	What it replaces
prefix	Custom leading addon. Constraint: Markup-only extension seam; passing a context variable with this name is ignored.
suffix	Custom trailing addon. Constraint: Markup-only extension seam; passing a context variable with this name is ignored.

Behaviour

Accessibility and responsive behaviour

Accessibility: Addons are hidden from assistive technology while the actual field keeps its label, help, and error description.
Responsive: It fills available inline size and shrinks safely with its field.
Without JavaScript: Static field and addon chrome works without JavaScript.

Need help?

Troubleshooting

Contract check: Required:

Provide the required bound `field`; prefix and suffix are chrome around that real control, not replacements for it.

Explore next