Input
Input let users enter and edit text.
setup
Import the InputBox component in a script tag.
Svelte Copy
import { InputBox } from "@mgisolutions/design-system/svelte";
basic usage
Demonstrate
Svelte Copy
<InputBox
id="firstName"
name="firstName"
placeholder="Your First Name. e.g. John"
label="First Name"
isRequired={true}
bottomText="Your First Name. e.g. John"
/>
<InputBox
placeholder="Field is disabled"
label="First Name"
disableText="Field is disabled and cannot be edited."
disabled={true}
/>
<InputBox
placeholder="Your First Name. e.g. John"
label="First Name"
errorText="First name is mandatory"
isError={true}
isRequired={true}
/>
required
Demonstrate
Svelte Copy
<InputBox
id="Address1"
name="Address1"
placeholder="e.g. 4501 Ford Avenue"
label="Address Line 1"
isRequired={true}
labelInfo="e.g. 4501 Ford Avenue"
bottomText="Number and street"
/>
<InputBox
placeholder="Field is disabled"
label="Address Line 1"
disableText="Field is disabled and cannot be edited."
disabled={true}
/>
<InputBox
label="Address Line 1"
errorText="Street and number is mandatory"
isError={true}
isRequired={true}
labelInfo="e.g. 4501 Ford Avenue"
/>
demo
Demonstrate
Svelte Copy
<InputBox
id="test"
name="test"
type="text"
placeholder="the placeholder"
label="This is label"
className=""
labelClassName=""
isError={false}
disabled={false}
isValid={false}
isRequired={true}
isOptional={false}
value=""
labelInfo="This is tooltip label information"
bottomText=""
disableText=""
errorText=""
successText=""
customPlaceholder="false"
/>
Component Data
- props
- methods
| Name | Description | Type | Default |
|---|---|---|---|
| id | To set the id of an input tag. | string | |
| name | To set the name of an input tag. | string | |
| type | To set the type of an input tag. | string | text |
| label | To set the label of an input tag. | string | |
| placeholder | To set the placeholder of an input tag. | string | |
| value | To set the default value of an input tag. | string | |
| className | This can be use for applying extra classes to the input tag. | string | |
| labelClassName | This can be use for applying extra classes to the label of an input tag. label must be passed for use this. | string | |
| labelInfo | This can be use to provide information about Input. label must be passed for use this. | string | |
| errorText | To show the error message at the bottom of the input, the isError name must be true. | string | |
| bottomText | To show the success message at the bottom of the input. | string | |
| successText | To show the success message at the bottom of the input, the isValid name must be true. | string | |
| disableText | To show the disable message at the bottom of the input. | string | |
| isValid | If using validation and want to set input is valid or not | boolean | false |
| isError | To display error on the input tag. | boolean | false |
| isRequired | To display (Require) on the right side of the input label. label must be passed for use this. | boolean | false |
| isOptional | To display (optional) on the right side of the input label. label must be passed for use this. | boolean | false |
| disabled | To display input tag as disabled. | boolean | false |
| customPlaceholder | To using custom placeholder instead of default placeholder, it work when placeholder has value | boolean | false |
| labelInfoPlacement | There are 8 placement options available. | "top-center" | "top-start" | "top-end" | "bottom-center" | "bottom-start" | "bottom-end" | "right" | "left" | top-start |