Skip to content
Vy logo
  • Identitet
  • Spor
  • Resources
Components

Input

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

FigmaGitHub

Code examples

<Input label="Name" />

Guidelines

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.

Code

<Input />

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

Props

Name
Type
Required?
Description
disabledboolean
endElementReact.ReactNodeUse the 24px icons
errorTextReact.ReactNodeDisplay error text for the component
helperTextReact.ReactNodeDisplay helper text for the input
invalidboolean
labelstringA descriptive label
readonlyboolean
requiredboolean
startElementReact.ReactNodeUse the 24px icons
variant"core" | "floating"Defaults to core.