Components
PhoneNumberInput
PhoneNumberInput allows the user to fill in their phone number, including the country code.
codeExamples
guidelines
PhoneNumberInput takes in the same props as Input, in addition to some others.
Use it to secure the country code in addition to the users phone number. The input only takes in numbers as a value.
code
<PhoneNumberInput />
import { PhoneNumberInput } from "@vygruppen/spor-react";
Props
Name | Type | Required? | Description |
|---|---|---|---|
onValueChange | (change: CountryCodeAndPhoneNumber) => void | Own functional callback for the two values. |
<Input />
import { Input } from "@vygruppen/spor-react";
Props
Name | Type | Required? | Description |
|---|---|---|---|
disabled | boolean | ||
endElement | React.ReactNode | Use the 24px icons for inputs of size "md", and 18px icons for inputs of size "sm" | |
errorText | React.ReactNode | Display error text for the component | |
helperText | React.ReactNode | Display helper text for the input | |
invalid | boolean | ||
label | string | A descriptive label | |
onChange | function | Function to handle controlled value of the input | |
readonly | boolean | ||
required | boolean | ||
size | "sm" | "md" | defaults to "md" | |
startElement | React.ReactNode | Use the 24px icons for inputs of size "md", and 18px icons for inputs of size "sm" | |
value | string | Controlled value of the input | |
variant | "core" | "floating" | Defaults to core. |