Input

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

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[]
-
<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>
<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"
/>
<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>