Skip to content

Forms and inputs: HTML, React and WordPress components

Forms and inputs with labels, announced error messages and validation that helps without blocking.9 components (forms and inputs) that are accessible and responsive, ready for your site: HTML + Tailwind, React, plain CSS and a WordPress block.

All 9 resources

  • An appointment form: reason, day with the native date picker, morning and afternoon slots as radio buttons, full slots crossed out and a summary of the choice.

    • Tailwind
    • React
    • CSS
    • WordPress
    Component
  • File drop zone

    Coming soon

    An upload field that accepts drag and drop and lists the chosen files.

    • Tailwind
    • React
    • CSS
    • WordPress
    Component
  • A list of settings toggled with switches, each with a description.

    • Tailwind
    • React
    • CSS
    • WordPress
    Component
  • Multi-step form

    Free for members

    An appointment booking split into three steps, with a progress indicator.

    • Tailwind
    • React
    • CSS
    • WordPress
    Component
  • A compact sign-in form with password reveal and recovery link.

    • Tailwind
    • React
    • CSS
    • WordPress
    Component
  • Fields whose label slides above the entry, in pure CSS.

    • Tailwind
    • React
    • CSS
    • WordPress
    Component
  • A field offering suggestions as you type, navigable with the keyboard.

    • Tailwind
    • React
    • CSS
    • WordPress
    Component
  • Radio buttons presented as selectable cards, to pick a plan or an option.

    • Tailwind
    • React
    • CSS
    • WordPress
    Component