Forms

Typed form controls that wrap Bootstrap form markup. Basic controls are Server Components; plugin-backed ones are client components.

Common props

Most form controls extend their native HTML element's attributes (so name, value, onChange, required,disabled, etc. all work) and add a small set of shared props:

Prop	Type	Default	Description
`label`	`string`	—	Renders a <label> above the control.
`error`	`string`	—	Shows an invalid-feedback message and error styling.
`hint`	`string`	—	Muted helper text below the control (Input, Textarea).
`fgroupClass`	`string`	—	Class on the wrapping form group.

Button

A themed button. Extends all native <button> attributes.

tsx

<Button label="Primary" />
<Button theme="success" icon="bi-check-lg" label="Save" />
<Button theme="danger" outline label="Delete" />
<Button theme="secondary" size="sm" label="Small" />

Prop	Type	Default	Description
`theme`	`BootstrapTheme`	`'primary'`	Button color.
`outline`	`boolean`	—	Use the outline variant.
`size`	`'sm' \| 'lg'`	—	Button size.
`icon`	`string`	—	Bootstrap Icons class shown before the label.
`label`	`string`	—	Button text (or use children).
`...native`	`ButtonHTMLAttributes`	—	onClick, type, disabled, etc.

Input

A text input with label, hint, and error support. Extends native input attributes.

EmailWe never share it.

Username

That username is taken.

tsx

<Input label="Email" type="email" placeholder="[email protected]" hint="We never share it." />
<Input label="Username" error="That username is taken." />

Prop	Type	Default	Description
`label / hint / error / fgroupClass`	`string`	—	See Common props.
`igroupSize`	`'sm' \| 'lg'`	—	Input group size.
`...native`	`InputHTMLAttributes`	—	type, value, placeholder, onChange, etc.

Select

A dropdown. Provide options or pass <option> children.

Country

tsx

<Select
  label="Country"
  options={[
    { value: 'us', label: 'United States' },
    { value: 'lv', label: 'Latvia' },
  ]}
/>

Prop	Type	Default	Description
`options`	`Array<{ value: string \| number; label: string }>`	—	Option list (alternative to children).
`label / error / fgroupClass`	`string`	—	See Common props.
`children`	`React.ReactNode`	—	Manually supplied <option> elements.
`...native`	`SelectHTMLAttributes`	—	value, onChange, multiple, etc.

Textarea

A multi-line text input.

MessageMarkdown supported.

tsx

<Textarea label="Message" rows={3} placeholder="Write something…" hint="Markdown supported." />

Prop	Type	Default	Description
`label / hint / error / fgroupClass`	`string`	—	See Common props.
`...native`	`TextareaHTMLAttributes`	—	rows, value, onChange, etc.

InputSwitch client

A toggle switch. onChange receives the boolean checked state.

Email notifications

tsx

<InputSwitch
  name="notifications"
  label="Email notifications"
  defaultChecked
  onChange={(checked) => console.log(checked)}
/>

Prop	Type	Default	Description
`name`required	`string`	—	Field name.
`label`	`string`	—	Label beside the switch.
`checked`	`boolean`	—	Controlled checked state.
`defaultChecked`	`boolean`	—	Uncontrolled initial state.
`onChange`	`(checked: boolean) => void`	—	Fires with the new boolean state.
`id / error / fgroupClass`	`string`	—	See Common props.

InputColor client

A native color picker. Extends native input attributes.

Brand color

tsx

<InputColor label="Brand color" defaultValue="#6f42c1" />

Prop	Type	Default	Description
`label / error / fgroupClass`	`string`	—	See Common props.
`...native`	`InputHTMLAttributes`	—	value, onChange, etc. Defaults to #0d6efd.

InputFile

A file input, single or multiple.

Attachments

tsx

<InputFile label="Attachments" multiple />

Prop	Type	Default	Description
`multiple`	`boolean`	—	Allow selecting multiple files.
`label / error / fgroupClass`	`string`	—	See Common props.
`...native`	`InputHTMLAttributes`	—	accept, onChange, etc.

InputFlatpickr client

A date/time picker backed by Flatpickr (lazy-loaded). Install flatpickr and load its CSS — see Plugins.

tsx

<InputFlatpickr
  label="Departure"
  dateType="datetime"
  options={{ enableTime: true, dateFormat: 'Y-m-d H:i' }}
/>

Prop	Type	Default	Description
`dateType`	`'text' \| 'date' \| 'time' \| 'datetime'`	`'text'`	Picker mode.
`options`	`Record<string, unknown>`	—	Raw Flatpickr options (merged in).
`label / error / fgroupClass`	`string`	—	See Common props.
`...native`	`InputHTMLAttributes`	—	placeholder, name, etc.

InputTomSelect client

An enhanced select (search, tags, multi-select) backed by Tom Select (lazy-loaded). Install tom-select and load its CSS — see Plugins.

tsx

<InputTomSelect
  label="Tags"
  multiple
  options={[{ value: 'react', label: 'React' }, { value: 'next', label: 'Next.js' }]}
  tomSelectOptions={{ create: true }}
/>

Prop	Type	Default	Description
`options`	`Array<{ value: string \| number; label: string }>`	—	Option list.
`tomSelectOptions`	`Record<string, unknown>`	—	Raw Tom Select options (merged in).
`label / error / fgroupClass`	`string`	—	See Common props.
`...native`	`SelectHTMLAttributes`	—	multiple, name, etc.

Typed form controls that wrap Bootstrap form markup. Basic controls are Server Components; plugin-backed ones are client components.

Common props

Most form controls extend their native HTML element's attributes (so name, value, onChange, required,disabled, etc. all work) and add a small set of shared props:

Prop	Type	Default	Description
`label`	`string`	—	Renders a <label> above the control.
`error`	`string`	—	Shows an invalid-feedback message and error styling.
`hint`	`string`	—	Muted helper text below the control (Input, Textarea).
`fgroupClass`	`string`	—	Class on the wrapping form group.

Button

A themed button. Extends all native <button> attributes.

tsx

<Button label="Primary" />
<Button theme="success" icon="bi-check-lg" label="Save" />
<Button theme="danger" outline label="Delete" />
<Button theme="secondary" size="sm" label="Small" />

Prop	Type	Default	Description
`theme`	`BootstrapTheme`	`'primary'`	Button color.
`outline`	`boolean`	—	Use the outline variant.
`size`	`'sm' \| 'lg'`	—	Button size.
`icon`	`string`	—	Bootstrap Icons class shown before the label.
`label`	`string`	—	Button text (or use children).
`...native`	`ButtonHTMLAttributes`	—	onClick, type, disabled, etc.

Input

A text input with label, hint, and error support. Extends native input attributes.

EmailWe never share it.

Username

That username is taken.

tsx

<Input label="Email" type="email" placeholder="[email protected]" hint="We never share it." />
<Input label="Username" error="That username is taken." />

Prop	Type	Default	Description
`label / hint / error / fgroupClass`	`string`	—	See Common props.
`igroupSize`	`'sm' \| 'lg'`	—	Input group size.
`...native`	`InputHTMLAttributes`	—	type, value, placeholder, onChange, etc.

Select

A dropdown. Provide options or pass <option> children.

Country

tsx

<Select
  label="Country"
  options={[
    { value: 'us', label: 'United States' },
    { value: 'lv', label: 'Latvia' },
  ]}
/>

Prop	Type	Default	Description
`options`	`Array<{ value: string \| number; label: string }>`	—	Option list (alternative to children).
`label / error / fgroupClass`	`string`	—	See Common props.
`children`	`React.ReactNode`	—	Manually supplied <option> elements.
`...native`	`SelectHTMLAttributes`	—	value, onChange, multiple, etc.

Textarea

A multi-line text input.

MessageMarkdown supported.

tsx

<Textarea label="Message" rows={3} placeholder="Write something…" hint="Markdown supported." />

Prop	Type	Default	Description
`label / hint / error / fgroupClass`	`string`	—	See Common props.
`...native`	`TextareaHTMLAttributes`	—	rows, value, onChange, etc.

InputSwitch client

A toggle switch. onChange receives the boolean checked state.

Email notifications

tsx

<InputSwitch
  name="notifications"
  label="Email notifications"
  defaultChecked
  onChange={(checked) => console.log(checked)}
/>

Prop	Type	Default	Description
`name`required	`string`	—	Field name.
`label`	`string`	—	Label beside the switch.
`checked`	`boolean`	—	Controlled checked state.
`defaultChecked`	`boolean`	—	Uncontrolled initial state.
`onChange`	`(checked: boolean) => void`	—	Fires with the new boolean state.
`id / error / fgroupClass`	`string`	—	See Common props.

InputColor client

A native color picker. Extends native input attributes.

Brand color

tsx

<InputColor label="Brand color" defaultValue="#6f42c1" />

Prop	Type	Default	Description
`label / error / fgroupClass`	`string`	—	See Common props.
`...native`	`InputHTMLAttributes`	—	value, onChange, etc. Defaults to #0d6efd.

InputFile

A file input, single or multiple.

Attachments

tsx

<InputFile label="Attachments" multiple />

Prop	Type	Default	Description
`multiple`	`boolean`	—	Allow selecting multiple files.
`label / error / fgroupClass`	`string`	—	See Common props.
`...native`	`InputHTMLAttributes`	—	accept, onChange, etc.

InputFlatpickr client

A date/time picker backed by Flatpickr (lazy-loaded). Install flatpickr and load its CSS — see Plugins.

tsx

<InputFlatpickr
  label="Departure"
  dateType="datetime"
  options={{ enableTime: true, dateFormat: 'Y-m-d H:i' }}
/>

Prop	Type	Default	Description
`dateType`	`'text' \| 'date' \| 'time' \| 'datetime'`	`'text'`	Picker mode.
`options`	`Record<string, unknown>`	—	Raw Flatpickr options (merged in).
`label / error / fgroupClass`	`string`	—	See Common props.
`...native`	`InputHTMLAttributes`	—	placeholder, name, etc.

InputTomSelect client

An enhanced select (search, tags, multi-select) backed by Tom Select (lazy-loaded). Install tom-select and load its CSS — see Plugins.

tsx

<InputTomSelect
  label="Tags"
  multiple
  options={[{ value: 'react', label: 'React' }, { value: 'next', label: 'Next.js' }]}
  tomSelectOptions={{ create: true }}
/>

Prop	Type	Default	Description
`options`	`Array<{ value: string \| number; label: string }>`	—	Option list.
`tomSelectOptions`	`Record<string, unknown>`	—	Raw Tom Select options (merged in).
`label / error / fgroupClass`	`string`	—	See Common props.
`...native`	`SelectHTMLAttributes`	—	multiple, name, etc.

Brad Diesel

John Pierce

Nora Silvester

Common props

Button

Input

Select

Textarea

InputSwitch client

InputColor client

InputFile

InputFlatpickr client

InputTomSelect client

Brad Diesel

John Pierce

Nora Silvester

Forms

Common props

Button

Input

Select

Textarea

InputSwitch client

InputColor client

InputFile

InputFlatpickr client

InputTomSelect client