Controlled form
Shoreline doesn't currently offer state management for forms, you may choose your prefered method of state handling and validation.
Here's an example of a simple controlled form.
export function Controlled() {
const [value, setValue] = useState('')
const [error, setError] = useState(false)
let onSubmit = (e) => {
e.preventDefault()
setError(false)
if (value === ''){
setError(true)
}
// perform submit action on backend
}
return (
<Stack>
<form onSubmit={onSubmit}>
<Field error={error}>
<Label>Poem</Label>
<Textarea name="poem" value={value} onChange={setValue} />
<FieldDescription>Write a poem</FieldDescription>
<FieldError>You must write something</FieldError>
</Field>
<Button type="submit" variant="primary">
Submit
</Button>
</form>
</Stack>
)
}
Uncontrolled form
export function Uncontrolled() {
return (
<Stack>
<form>
<Field>
<Label>Poem</Label>
<Textarea name="poem" />
<FieldDescription>Write a poem</FieldDescription>
</Field>
<Button type="submit" variant="primary">
Submit
</Button>
</form>
</Stack>
)
}