Components

Input

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

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>
  <Input label="Phone" leftIcon={<PhoneOutline24Icon />} />
  <Input label="Train" rightIcon={<TrainOutline24Icon />} />
</Stack>

Different variants if input fields

<Stack flexDirection="row" gap={2}>
<Input label="base" />
<Input label="floating" variant="floating" />
</Stack>