Input Group

Status

Component checklist

Key points

• Input groups are a variation of standard inputs with additional indicators placed at the start and/or end of the field
• These are fixed visual indicators that show what the value of the field relates to
• The indicator content can be text or a symbol (e.g., £, %, @)
• Input group fields are the same height as buttons and icon buttons, so they can be used inline
• Prefix and suffix values can be any length, but the recommendation is to keep them to two characters where possible
• Prefix and suffix content should not include icons or other components — text and symbols only
• Prefix and suffix can be displayed individually or at the same time

Use an input group to provide context about the expected format or unit of measurement for user input.