Some props/prop values deprecated in SWAN v3.3
Refer to the information on props/prop values provided further down this page. Find more information and migration documentation in the Deprecation roadmap.
Text Input
Use Text Input...
- To input or edit freeform alpha-numerical information.
- To input a single line of text.
Don't use Text Input...
- To input information that can be predicted from a list of suggested values. Use Combobox instead.
- To input multiple lines of text. Use Text Area instead.
- To create a search field. Use Search Input or Combobox With Search Input instead.
The preview has been updated.
Type
Use an input type
that is appropriate for the Text Input's function (e.g., type="email"
for an email address field).
The preview has been updated.
Placeholder
Use placeholder
to provide hints for what to enter.
Size
size
is deprecated in SWAN v3.3
The component now automatically handles sizing based on the selected mode(standardMode
/compactMode
). Please update your implementation to rely on the new mode-based sizing.
Mini
Use size="mini"
to reduce the height of a Text Input.
The preview has been updated.
With floating label
An alternate way to display the TextInput with the label positioned inside it, above the selection. To achieve that, use the InputWithFloatingLabel
component.
Note: the floating label has the same appearance as placeholder text but it is not an HTML placeholder
; any actual placeholder
attribute on the text area is transparent.
The preview has been updated.
With Button beside
Use TextInputWithButtonBeside
to group a text input and button together.
The preview has been updated.
With icon-only Button inset
Use TextInputWithButtonInset
to place an icon-only Button within the Text Input.
- The typical use case is for search bars, and sign in forms.
- You can also position the enclosed button either "left" or "right" by using the prop
buttonPosition
.
The preview has been updated.
Labels, Errors, and Helper Text
Refer to Form guidelines.
Managing State in React
Refer to Form guidelines.
Accessibility
Refer to the accessibility guidelines for Form.
Implementation
- Inputs default to a width of 100%, filling up their container; this is a best practice for responsive design.
- To limit an input's width, you should constrain its container, e.g., by putting it into a Grid element of a certain number of columns.
Props
<input />
as the root element. You can utilize the native attributes supported by <input />
tag. The ref
is directly assigned to the root element, allowing you to access and manipulate it as needed.prop | type | required | description | default |
---|---|---|---|---|
size | "standard" | "mini" | null | false | ⚠️ Deprecated - This is deprecated without a replacement.
The size variation
Available options: 'standard', 'mini', | standard |
skin | "standard" | "error" | null | false | The visual variant.
Note that error is implied if the TextInput is used inside of a FormInput that also contains a FormError.
Available options: 'standard', 'error' | standard |
<label />
as the root element. You can utilize the native attributes supported by <label />
tag. The ref
is directly assigned to the root element, allowing you to access and manipulate it as needed.<div />
as the root element. You can utilize the native attributes supported by <div />
tag. The ref
is directly assigned to the root element, allowing you to access and manipulate it as needed.<div />
as the root element. You can utilize the native attributes supported by <div />
tag. The ref
is directly assigned to the root element, allowing you to access and manipulate it as needed.<div />
as the root element. You can utilize the native attributes supported by <div />
tag. The ref
is directly assigned to the root element, allowing you to access and manipulate it as needed.prop | type | required | description | default |
---|---|---|---|---|
buttonPosition | "left" | "right" | null | false | Position of the button.
Available options: 'left', 'right' | right |
How does Text Input meet your needs?