Lion Logo Lion Guides Components Docs Blog Toggle darkmode

Form: Styling


Can be provided via the label attribute, but the slot can be used to change the html and CSS of the label. For example add an u-sr-only class to the label to make it (partially) visually hidden. A label is always needed for accessibility reasons.


The prefix is used for addons to the input like a minus button in the input-stepper.


The suffix can be used for addons to the input like a calculator, datepicker or addressbook. In these cases a button with an icon is used.


Before slot does not have an active use case yet.



Due to our custom inputs being Web Components, it is possible to put HTML content inside an input. For example if you want to add a button as a prefix or suffix.