TextInput
Use the TextInput component to request a small amount of information, such as
a name or an email address. To let users input larger amounts of text, use a
TextArea instead.
TextInputProps
Signature:
export declare type TextInputProps = <, | | | | | | | | | | | | | | | | > & <, (value: , event: <>) => > & & {
/**
* Maps to the native input type. Use this to enhance the semantics
* of the native input, change default keyboards on mobile or support browser
* autocompletion for specific types.
* @see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#input_types}
*
* @defaultValue
*/
type?: | | | | | ;
};TextInputUncontrolledProps
| Name | Type | Default | Description |
|---|---|---|---|
defaultValue? | - | The default value of the input. |
TextInputControlledProps
| Name | Type | Default | Description |
|---|---|---|---|
value? | - | The value of the input. |
TextInput.Prefix, TextInput.Suffix
You can use the TextInput.Prefix component to render custom content in front
of the input, or the TextInput.Suffix component if you need to render content
after it.
TextInputContentProps
| Name | Type | Default | Description |
|---|---|---|---|
children | - | Elements to be displayed in the Prefix slot. |
TextInput.Button
You can use the TextInput.Button component to render a button inside the
TextInput.Prefix or TextInput.Suffix component.
TextInputButtonProps
, , , , | Name | Type | Default | Description |
|---|---|---|---|
children | - | Elements to be displayed in the BaseInput Button slot, preferably an icon or a similar visual element | |
disabled? | false | If a button is disabled e.g. it cannot be interacted with. By default, it inherits the disabled prop of the BaseInput, but can be overwritten. | |
tooltipText? | - | If specified, a tooltip is rendered with this text, which describes what the button does. Please also consider translating the text in an internationalized context and use a short text description for the tooltip. The positioning and placing of the according tooltip will be handled by the component. | |
onClick? | - | Called when the button is interacted with. | |
readOnly? | - | Determines whether the input is in read-only mode. |