SfInput is a single-line text field allows users to enter any combination of letters, numbers, or symbols. It adds default styles to the native
<input type="text"> and supports supports adding content before/after the text input.
Basic input component
SfInput supports 3 sizes that can be set with the
Input with icons
You can insert content before and after your input using the
This can be useful for adding icons or buttons to your input.
Input in disabled state
SfInput comes with out-of-the-box styles for a disabled input.
SfInput comes with out-of-the-box styles for a readonly input.
If you pass the
invalid prop, the input will be styled to indicate an invalid state.
This is an example of what
SfInput might look like in your end code. It has a label, help text, character counting, and different styles depending on the input state.
All non-prop attributes and styles added to
SfInput component are passed directly to the native input element. This means that you can add all of the input attributes directly to
SfInput. If you want to style the wrapper
div, you can pass your classes via the
size is a specified prop of
SfInput, you won't be able to pass the native
size attribute to your input element. Instead, you can use the
width property with
ch unit instead (eg.
<input>, it inherits all the features of the native input. For example,
SfInput is focusable for keyboard users with
div tags to slots. If an input element is wrapped in
label tag (recommended) then it can't have