Components

Form

Group input controls in a native HTML form.

Example

Requires React 18.2+ or 19 and shared styles. See setup.

Default

Loading preview…

Code
'use client';
import { useState } from 'react';
import { VStack, TextField, Button } from '@swiftuijs/ui';
import { Form } from '@swiftuijs/ui';
function DefaultForm() {
    const [name, setName] = useState('');
    const [email, setEmail] = useState('');
    return (<Form onSubmit={(e) => {
            e.preventDefault();
            alert(`Name: ${name}, Email: ${email}`);
        }}>
      <VStack spacing={16}>
        <TextField value={name} onChange={(e) => setName(e.target.value)} placeholder="Name"/>
        <TextField value={email} onChange={(e) => setEmail(e.target.value)} placeholder="Email" type="email"/>
        <Button type="submit">Submit</Button>
      </VStack>
    </Form>);
}
export default function Example() {
    return (<DefaultForm />);
}

With Validation

Add validation to form fields:

Usage and limitations

  • Supports ordinary inputs and library controls. onSubmit receives the native form event; call event.preventDefault() for client-side submission.
  • Provide associated labels, useful validation errors, and loading/success feedback.
  • Validate before submission and validate/sanitize again on the server. Persistence and submission logic belong to the application.

More examples

With Validation
Complex Form

API reference

PropTypeRequiredDescription
onSubmit(event: FormEvent<HTMLFormElement>) => voidNoForm submission handler
isValidbooleanNoForm validation state

Inherits additional props from Omit<IBaseElementComponent<'form'>, 'onSubmit' | 'noValidate'>.

Edit this page on GitHubReport an issue

ForEach

Render an array with a stable key and a render function.

Gauge

Gauge shows a current value within a bounded range, matching SwiftUI's summary-style meter while keeping standard `progressbar` semantics.