Skip to main content

Form

Wraps one or more form controls and enables implicit submission, letting users submit the form from any input by pressing “Enter.” Unlike the HTML form element, this component doesn’t automatically submit data via HTTP. You must register a submit event to handle form submission in JavaScript.

Anchor to eventsEvents

Learn more about registering events.

Anchor to reset
reset
<typeof tagName> | null

A callback that is run when the form is reset.

Anchor to submit
submit
<typeof tagName> | null

A callback that is run when the form is submitted.

Was this section helpful?

jsx

const defaultValues = {
text: 'default value',
number: 50,
};

const [textValue, setTextValue] = useState('');
const [numberValue, setNumberValue] = useState('');

return (
<s-admin-block title="My Block Extension">
<s-form
onSubmit={(event) => {
event.waitUntil(fetch('app:save/data'));
console.log('submit', {textValue, numberValue});
}}
onReset={() => console.log('automatically reset values')}
>
<s-stack direction="block" gap="base">
<s-text-field
label="Default Value"
name="my-text"
defaultValue={defaultValues.text}
value={textValue}
onChange={(e) => setTextValue(e.target.value)}
/>
<s-number-field
label="Percentage field"
name="my-number"
defaultValue={defaultValues.number}
value={numberValue}
onChange={(e) => setNumberValue(e.target.value)}
/>
</s-stack>
</s-form>
</s-admin-block>
);