components
Input Phone
v.1.0.0 | SaturnUsage
import { InputPhone } from '@kubit-ui-web/react-components'
12345678
<InputPhone
variant="DEFAULT"
prefix={{ content: '+34' }}
flag={{ icon: 'ICON_MOBILE' }}
label={{ content: 'Label' }}
placeholder="Placeholder"
helpMessage={{ content: 'Help message' }}
/>Props
The InputPhone component inherits its properties of the Input component. For more information visit the Input documentation.
Let's delve into the versatility of the inputPhone component by examining its avalaible props.
| Property | Type | Default | Description |
|---|---|---|---|
variant Required | String | - | Variant of InputPhone |
| prefix | InputPhonePrefixType | - | Country prefix number to show into prefix container |
| prefixNode | ReactNode | - | Node to show into prefix container. If this prop is passed, the prefix prop will be ignored |
| flag | InputPhoneFlagType | - | Country flag to show into prefix container |
| inputVariant | String | - | Set the Input's variant |
| error | Boolean | - | Specifies if the input element has error or not |
| disabled | Boolean | - | Specifies if the input element is disabled or not |
| errorExecution | ERROR_EXECUTION | - | When error handling |
| keyValidation | String | - | Key validation |
| internalErrorExecution | INTERNAL_ERROR_EXECUTION | onChangeOnBlur | When error handling |
| onInternalErrors | (errors: string) => void | - | Function that is called when an internal error occurs |
| onError | (error: boolean) => void | - | Function that is called when an error occurs |
| ctv | InputPhoneStylesProps | - | Modify styles for the default version of the component |
- And extends Input Controlled Props except variant, styles, inputId, error, disabled, locale
Initialized extended props
| Property | Type | Default | Description |
|---|---|---|---|
| maskType | MASK_TYPE | NUMBERS | Mask type applied |
| truncate | Boolean | false | Indicates if text value is truncated when is too big |
| type | InputTypeType | TEL | The type attribute specifies the type of input element to display. If the type attribute is not specified, the default type is text" |