ComponentsUpdated

Input

Input fields are used to let the users type in content.

Version 13.4.0 introduces the size prop, which accepts "sm" or "md" and defaults to "md".

Code examples

Input is wrapped in a Field component, making it easy to define label, errorText and helperText in the best accessible way.

Props from the component comes from a large selection. Unique for Input is listed under code.

For search, use SearchInput.

For password, use PasswordInput.

For phone, use PhoneNumberInput.

import { Input } from "@vygruppen/spor-react";

Name	Type	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.