Skip to content
Home

SubmitIndicator

Info
Demos
Properties

Demos

Default appearance

...
Code Editor
<Form.SubmitIndicator state="pending" />

SubmitIndicator in a simple form

Press the "Send" button to see the submit indicator.

Code Editor
const delay = debounceAsync(async function () {
  try {
    const request = createRequest()
    await request(1000) // Simulate a request
  } catch (error) {
    return error
  }
})
render(
  <Form.Handler onSubmit={delay}>
    <Form.Card>
      <Field.String path="/myField" label="Short label" />
      <Form.ButtonRow>
        <Form.SubmitButton />
        <Button variant="tertiary">Cancel</Button>
      </Form.ButtonRow>
    </Form.Card>
  </Form.Handler>,
)

SubmitIndicator with field validation

This example shows a combination of async validation and async change behavior, which could be used for e.g. autosaving the field value.

NB: if the indicator in the label does not have enough room, it will animate to a new line.

Make a change in the input field.

Code Editor
const delay = debounceAsync(async function () {
  try {
    const request = createRequest()
    await request(1000) // Simulate a request
  } catch (error) {
    return error
  }
})
render(
  <Form.Handler onSubmit={delay} onChange={delay}>
    <Form.Card>
      <Field.String
        path="/myField1"
        label="Label (with async validation)"
        placeholder="Write something ..."
        onChangeValidator={delay}
      />
      <FieldBlock width="medium">
        <Field.String
          path="/myField2"
          width="stretch"
          label="This is a long label"
        />
      </FieldBlock>
      <Form.ButtonRow>
        <Form.SubmitButton />
        <Button variant="tertiary">Cancel</Button>
      </Form.ButtonRow>
    </Form.Card>
  </Form.Handler>,
)

Used in other components

Code Editor
<Form.Handler>
  <Flex.Horizontal align="center">
    <Form.SubmitButton showIndicator />
    <Button variant="secondary" icon="chevron_right">
      Secondary
      <Form.SubmitIndicator state="pending" />
    </Button>
    <Button variant="tertiary">
      Tertiary
      <Form.SubmitIndicator state="pending" />
    </Button>
    <FormLabel>
      Label
      <Form.SubmitIndicator state="pending" />
    </FormLabel>
  </Flex.Horizontal>
</Form.Handler>

With a label

Vennligst vent...
Code Editor
<Form.Handler>
  <Form.SubmitIndicator state="pending" showLabel />
</Form.Handler>