Skip to documentation
DocsFormsForm
Component library

Forms / COMPONENT

Form

Web · implementedDesktop · preview

Wrapper form untuk grouping field dan submit flow.

import { Form } from "./vendor/syne-ui/index.js";TypeScript ready
Live preview

Try the controls above.

Interactive example · Try the controls with your mouse or keyboard.

Start with an example

Import the component and adapt it to your interface.

Example.tsxTSX
import { Form } from "./vendor/syne-ui/index.js";

export function Example() {
  return (
    <Form onSubmit={(event) => { event.preventDefault(); console.log(new FormData(event.currentTarget)); }}><Form.Field label="Email" htmlFor="email"><input id="email" name="email" type="email" required /></Form.Field><button type="submit">Save</button></Form>
  );
}
Make it yours

Use className and --syne-* tokens to match your design system.