The Strum logo: two oscillating strings from an instrument next to the word Strum
Skip to content
GitHub

Input

A single-line text input for HTML forms
<Input id="input-simple" label="Song name" placeholder="Symphony No. 31" />

Props
Link to this heading

The component also passes through React.InputHTMLAttributes<HTMLInputElement> props, which are excluded here for brevity.

<Input>

import { Input } from '@strum/react';
name
type
default
error
string
-
id*
Required
string
-
label*
Required
string
-
onChange
ChangeEventHandler<HTMLInputElement>
-
ref
Ref<HTMLInputElement>
-
size
"large" | "small" | "medium"
medium
state
"error"
-
value
string | number | readonly string[]
-

Sizes
Link to this heading

<Stack>

  <Input

    id="input-size-small"

    label="Small input"

    placeholder="Small input"

    size="small"

  />

  <Input

    id="input-size-medium"

    label="Medium input"

    placeholder="Medium input"

    size="medium"

  />

  <Input

    id="input-size-large"

    label="Large input"

    placeholder="Large input"

    size="large"

  />

</Stack>

Types
Link to this heading

<Stack>

  <Input id="input-text" label="Text input" type="text" />

  <Input id="input-email" label="Email input" type="email" />

  <Input id="input-password" label="Password input" type="password" />

</Stack>

Disabled state
Link to this heading

<Input

  disabled

  id="input-disabled"

  label="Song name"

  placeholder="Symphony No. 31"

/>

Error state
Link to this heading

<Input

  error="This field is required"

  id="input-error"

  label="Song name"

  required

/>

Controlled input
Link to this heading

To control your input with React, simply include a value string prop and a onChange function prop.

<Stack>

  <Input

    id="controlled-input"

    label="Text input"

    onChange={changeSongTitle}

    type="text"

    value={songTitle}

  />

</Stack>
Edit on GitHub