Profile & Preferences Form shows every common form control in one consistent style, and works as a real settings page. It has an avatar drop area, text and email fields, a select menu, a date picker, a bio box with a counter, theme option cards, three toggle switches with descriptions and a range slider that shows its value.

Controls that match

All controls share the same radius, border, focus ring and colours, which come from your theme. The switches are real checkboxes with role="switch", so assistive technology announces them as on or off. The option cards are radio buttons, the range slider uses the browser's native control tinted with your brand colour, and the date picker is the native one, which is best on phones.

Use it three ways

As a profile page in an account area; as a preferences step in an onboarding flow; or as a reference when you need to style your own forms the same way, since you can copy any control from the exported HTML. For shorter flows use the Multi-Step Form.

Sending

Every form posts to the address you paste into "Form URL" (Formspree, Basin, Getform or your own server), shows a success message, shows an error message when something fails and contains a hidden spam-trap field. Without JavaScript it is an ordinary form post. Fields sent: avatar, name, email, role, birthday, bio, theme, the notification switches and the text size.