Controls

The Control component provides styled form controls based on Bootstrap's form-control API. It supports native inputs, textareas, plain text mode, different sizes, file inputs, and all utility props inherited from Prime.

Import

import { Form } from "@promethey/bsui";

Note

Badge inherits all utility props supported by the Prime component, including layout, spacing, typography, colors, borders, sizing, positioning, and other Bootstrap utility APIs.

Basic usage

Input types

Use the type prop to specify the native input type.

Textarea

Set as="textarea" to render a multiline text control.

Use the rows prop to control the visible number of lines.

Sizes

Use the size prop to change the visual size.

Disabled

Use disabled to prevent user interaction.

Read only

Use readOnly to display a value that cannot be edited.

Plain text

Use plaintext to display form values without the default control styling.

File input

Use type="file" to create a file selector.

Set multiple to allow selecting multiple files.

Controlled value

Use value with React state to create a controlled component.

Default value

Use defaultValue for uncontrolled inputs.

Complete example

Combine different options with utility props.

Utility props

All utility props provided by Prime are supported.

API

Control

Prop	Type	Default	Description
children	ReactNode	—	Content rendered inside the component.
as	"input" | "textarea"	"input"	Determines the underlying HTML element.
className	string | object	—	Additional CSS classes.
style	object	—	Inline styles.
value	string | number	null	Controlled value of the input or textarea.
defaultValue	string | number	null	Default uncontrolled value.
title	string	null	Native title attribute.
size	"sm" | "lg"	null	Visual size variant.
type	string	"text"	Native input type.
placeholder	string	null	Placeholder text.
rows	number	null	Number of visible textarea rows.
disabled	boolean	false	Disables user interaction.
readOnly	boolean	false	Makes the control non-editable.
plaintext	boolean	false	Displays the value as plain text.
multiple	boolean	false	Allows multiple file selection.