Styling

Basics

Kingpin is designed to be Design System ready (aside super performant).

For this reason the <Form/> element accepts whatever element'd be passed as child.

Even if it's no mandatory it's strongly encouraged creating your own component wrapping the library base Components like:

Typescript

import { Form, Input } from 'kingpin-react-form'
import type { InputHTMLAttributes } from 'react'

function MyInput(props: InputHTMLAttributes<HTMLInputElement>): JSX.Element {
  return (
    <div className="my-classname">
      <label htmlFor={props.id}>Label</label>
      <Input {...props} />
    </div>
  )
}

function App(): JSX.Element {
  return (
    <Form>
      <MyInput />
    </Form>
  )
}

Javascript

import { Form, Input } from 'kingpin-react-form'

function MyInput() {
  return (
    <div className="my-classname">
      <label htmlFor={props.id}>Label</label>
      <Input {...props} />
    </div>
  )
}

function App() {
  return (
    <Form>
      <MyInput />
    </Form>
  )
}

Error state

Each kingpin element accept the errorClassName prop in order to improve the user experience.

Check the validation section for more.

3th part library

Since the <Form> element accepts any react element as child component the library is ready for whatever desing library like bootstrap or tailwindcss