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

Input

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

FigmaGitHub

Examples

A simple input field

<Input label="Name" />

A controlled input field

() => {
  const [name, setName] = React.useState("");
  return (
    <Input 
      label="Name" 
      value={name}
      onChange={e => setName(e.target.value)}
    />
  );
}

An input field with icons

<Stack gap={1}>
  <Input label="Phone" startElement={<PhoneOutline24Icon />} />
  <Input label="Train" endElement={<TrainOutline24Icon />} />
</Stack>

Different variants

<Stack gap={3}>
  <Input label="Base" />
  <Input label="Floating" variant="floating" />
</Stack>

Input with error

<Input 
  label="Email" 
  type="email" 
  startElement={<MobileOutline24Icon />} 
  errorText="You email is not valid"
  invalid
/>

Input with helper text

<Input 
  label="Email" 
  type="email" 
  startElement={<MobileOutline24Icon />} 
  helperText="This is the helpertext"
/>

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
labelstringA descriptive label
variant"core" | "floating"Defaults to core.
startElementReact.ReactNodeUse the 24px icons
endElementReact.ReactNodeUse the 24px icons
disabledboolean
invalidboolean
errorTextReact.ReactNodeDisplay error text for the component
readonlyboolean
requiredboolean
helperTextReact.ReactNodeDisplay helper text for the input