tessl/npm-react-bootstrap

Bootstrap 5 components built with React for modern web applications

—

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Overview

Eval results

Files

Form Components

Name: tessl/npm-react-bootstrap
Author: tessl

Comprehensive form controls with validation support and accessibility features.

Capabilities

Form

Form wrapper component providing context for form controls.

/**
 * Form component for form context
 * @param validated - Show validation styles
 */
function Form(props: FormProps): JSX.Element;

interface FormProps extends React.FormHTMLAttributes<HTMLFormElement> {
  /** Show validation styles */
  validated?: boolean;
  /** Component used for the root node */
  as?: React.ElementType;
  /** Bootstrap CSS class prefix */
  bsPrefix?: string;
}

FormControl

Input control component for text inputs, textareas, and selects.

/**
 * FormControl component for input controls
 * @param type - Input type
 * @param size - Size variant
 * @param isValid - Valid state
 * @param isInvalid - Invalid state
 */
function FormControl(props: FormControlProps): JSX.Element;

interface FormControlProps extends React.InputHTMLAttributes<HTMLInputElement> {
  /** Input type */
  type?: string;
  /** Size variant */
  size?: "sm" | "lg";
  /** Valid state */
  isValid?: boolean;
  /** Invalid state */  
  isInvalid?: boolean;
  /** Plain text styling */
  plaintext?: boolean;
  /** Component used for the root node */
  as?: React.ElementType;
  /** Bootstrap CSS class prefix */
  bsPrefix?: string;
}

FormControl Usage Examples:

import { Form } from "react-bootstrap";

// Basic text input
<Form.Control 
  type="text" 
  placeholder="Enter text"
  value={value}
  onChange={(e) => setValue(e.target.value)}
/>

// Large size input with validation
<Form.Control
  type="email"
  size="lg"
  placeholder="Enter email"
  isValid={isValidEmail}
  isInvalid={!isValidEmail && touched}
/>

// Textarea
<Form.Control 
  as="textarea" 
  rows={3} 
  placeholder="Enter message"
/>

// Plaintext (read-only)
<Form.Control 
  plaintext 
  readOnly 
  defaultValue="email@example.com" 
/>

FormCheck

Checkbox and radio button component with label support.

/**
 * FormCheck component for checkboxes and radio buttons
 * @param type - Check type
 * @param inline - Inline layout
 * @param reverse - Reverse label position
 * @param disabled - Disabled state
 */
function FormCheck(props: FormCheckProps): JSX.Element;

interface FormCheckProps extends React.InputHTMLAttributes<HTMLInputElement> {
  /** Check type */
  type?: "checkbox" | "radio" | "switch";
  /** Inline layout */
  inline?: boolean;
  /** Reverse label position */
  reverse?: boolean;
  /** Disabled state */
  disabled?: boolean;
  /** Unique identifier */
  id?: string;
  /** Label content */
  label?: React.ReactNode;
  /** Valid state */
  isValid?: boolean;
  /** Invalid state */
  isInvalid?: boolean;
  /** Feedback content */
  feedback?: React.ReactNode;
  /** Feedback type */
  feedbackType?: "valid" | "invalid";
  /** Bootstrap CSS class prefix */
  bsPrefix?: string;
}

FormCheck Usage Examples:

import { Form } from "react-bootstrap";

// Basic checkbox
<Form.Check 
  type="checkbox"
  id="check-1"
  label="Check me out"
  checked={isChecked}
  onChange={(e) => setIsChecked(e.target.checked)}
/>

// Radio buttons
<Form.Check
  type="radio"
  id="radio-1"
  name="radioGroup"
  label="Option 1"
  value="option1"
  checked={selectedOption === 'option1'}
  onChange={(e) => setSelectedOption(e.target.value)}
/>

// Switch
<Form.Check 
  type="switch"
  id="switch-1"
  label="Toggle me"
  checked={isToggled}
  onChange={(e) => setIsToggled(e.target.checked)}
/>

// Inline checkboxes
<Form.Check
  inline
  type="checkbox"
  id="inline-1"
  label="Inline 1"
/>
<Form.Check
  inline
  type="checkbox"
  id="inline-2"
  label="Inline 2"
/>

FormSelect

Select dropdown component.

/**
 * FormSelect component for select dropdowns
 * @param size - Size variant
 * @param isValid - Valid state
 * @param isInvalid - Invalid state
 */
function FormSelect(props: FormSelectProps): JSX.Element;

interface FormSelectProps extends React.SelectHTMLAttributes<HTMLSelectElement> {
  /** Size variant */
  size?: "sm" | "lg";
  /** Valid state */
  isValid?: boolean;
  /** Invalid state */
  isInvalid?: boolean;
  /** Component used for the root node */
  as?: React.ElementType;
  /** Bootstrap CSS class prefix */
  bsPrefix?: string;
}

FormSelect Usage Examples:

import { Form } from "react-bootstrap";

// Basic select
<Form.Select 
  value={selectedValue}
  onChange={(e) => setSelectedValue(e.target.value)}
>
  <option>Choose...</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</Form.Select>

// Large select with validation
<Form.Select 
  size="lg"
  isInvalid={!selectedValue}
>
  <option value="">Select an option</option>
  <option value="option1">Option 1</option>
  <option value="option2">Option 2</option>
</Form.Select>

FormLabel

Label component for form controls.

/**
 * FormLabel component for form labels
 * @param htmlFor - Associated control ID
 * @param column - Column layout
 * @param visuallyHidden - Screen reader only
 */
function FormLabel(props: FormLabelProps): JSX.Element;

interface FormLabelProps extends React.LabelHTMLAttributes<HTMLLabelElement> {
  /** Associated control ID */
  htmlFor?: string;
  /** Column layout */
  column?: boolean | "sm" | "lg";
  /** Screen reader only */
  visuallyHidden?: boolean;
  /** Component used for the root node */
  as?: React.ElementType;
  /** Bootstrap CSS class prefix */
  bsPrefix?: string;
}

FormText

Help text component for form controls.

/**
 * FormText component for help text
 * @param muted - Muted styling
 */
function FormText(props: FormTextProps): JSX.Element;

interface FormTextProps extends React.HTMLAttributes<HTMLElement> {
  /** Muted styling */
  muted?: boolean;
  /** Component used for the root node */
  as?: React.ElementType;
  /** Bootstrap CSS class prefix */
  bsPrefix?: string;
}

FormGroup

Group component for organizing form controls.

/**
 * FormGroup component for grouping form elements
 * @param controlId - Unique control identifier
 */
function FormGroup(props: FormGroupProps): JSX.Element;

interface FormGroupProps extends React.HTMLAttributes<HTMLDivElement> {
  /** Unique control identifier */
  controlId?: string;
  /** Component used for the root node */
  as?: React.ElementType;
  /** Bootstrap CSS class prefix */
  bsPrefix?: string;
}

FloatingLabel

Floating label component for modern form styling.

/**
 * FloatingLabel component for floating labels
 * @param controlId - Associated control ID
 * @param label - Label text
 */
function FloatingLabel(props: FloatingLabelProps): JSX.Element;

interface FloatingLabelProps extends React.HTMLAttributes<HTMLDivElement> {
  /** Associated control ID */
  controlId?: string;
  /** Label text */
  label: React.ReactNode;
  /** Bootstrap CSS class prefix */
  bsPrefix?: string;
}

Comprehensive Form Example:

import { Form, Button, Row, Col } from "react-bootstrap";

function ContactForm() {
  const [validated, setValidated] = useState(false);

  const handleSubmit = (event) => {
    const form = event.currentTarget;
    if (form.checkValidity() === false) {
      event.preventDefault();
      event.stopPropagation();
    }
    setValidated(true);
  };

  return (
    <Form noValidate validated={validated} onSubmit={handleSubmit}>
      <Row className="mb-3">
        <Form.Group as={Col} md="4" controlId="validationCustom01">
          <Form.Label>First name</Form.Label>
          <Form.Control
            required
            type="text"
            placeholder="First name"
            defaultValue="Mark"
          />
          <Form.Control.Feedback>Looks good!</Form.Control.Feedback>
        </Form.Group>
        
        <Form.Group as={Col} md="4" controlId="validationCustom02">
          <Form.Label>Last name</Form.Label>
          <Form.Control
            required
            type="text"
            placeholder="Last name"
            defaultValue="Otto"
          />
          <Form.Control.Feedback>Looks good!</Form.Control.Feedback>
        </Form.Group>
        
        <Form.Group as={Col} md="4" controlId="validationCustomUsername">
          <Form.Label>Username</Form.Label>
          <Form.Control
            type="text"
            placeholder="Username"
            required
          />
          <Form.Control.Feedback type="invalid">
            Please choose a username.
          </Form.Control.Feedback>
        </Form.Group>
      </Row>
      
      <Form.Group className="mb-3">
        <Form.Check
          required
          label="Agree to terms and conditions"
          feedback="You must agree before submitting."
          feedbackType="invalid"
        />
      </Form.Group>
      
      <Button type="submit">Submit form</Button>
    </Form>
  );
}

InputGroup

Input group component for adding icons, buttons, or text to inputs.

/**
 * InputGroup component for input groups
 * @param size - Size variant
 * @param hasValidation - Has validation styling
 */
function InputGroup(props: InputGroupProps): JSX.Element;

interface InputGroupProps extends React.HTMLAttributes<HTMLDivElement> {
  /** Size variant */
  size?: "sm" | "lg";
  /** Has validation styling */
  hasValidation?: boolean;
  /** Component used for the root node */
  as?: React.ElementType;
  /** Bootstrap CSS class prefix */
  bsPrefix?: string;
}

InputGroupText

Text addon for input groups.

/**
 * InputGroupText component for input group text
 */
function InputGroupText(props: InputGroupTextProps): JSX.Element;

interface InputGroupTextProps extends React.HTMLAttributes<HTMLElement> {
  /** Component used for the root node */
  as?: React.ElementType;
  /** Bootstrap CSS class prefix */
  bsPrefix?: string;
}

FormRange

Range input component with slider styling.

/**
 * FormRange component for range inputs
 * @param min - Minimum value
 * @param max - Maximum value
 * @param step - Step increment
 */
function FormRange(props: FormRangeProps): JSX.Element;

interface FormRangeProps extends React.InputHTMLAttributes<HTMLInputElement> {
  /** Minimum value */
  min?: number;
  /** Maximum value */
  max?: number;
  /** Step increment */
  step?: number;
  /** Valid state */
  isValid?: boolean;
  /** Invalid state */
  isInvalid?: boolean;
  /** Component used for the root node */
  as?: React.ElementType;
  /** Bootstrap CSS class prefix */
  bsPrefix?: string;
}

FormFloating

Floating label container component.

/**
 * FormFloating component for floating label containers
 */
function FormFloating(props: FormFloatingProps): JSX.Element;

interface FormFloatingProps extends React.HTMLAttributes<HTMLDivElement> {
  /** Component used for the root node */
  as?: React.ElementType;
  /** Bootstrap CSS class prefix */
  bsPrefix?: string;
}

Switch

Switch toggle component (alias for FormCheck with type="switch").

/**
 * Switch component for toggle switches
 */
function Switch(props: SwitchProps): JSX.Element;

interface SwitchProps extends Omit<FormCheckProps, 'type'> {
  /** Switch is always type="switch" */
  type?: 'switch';
}

Form Compound Components

React Bootstrap Form components support compound component patterns for cleaner imports:

// Compound component structure
Form.Control = FormControl;
Form.Check = FormCheck;
Form.Switch = Switch;
Form.Group = FormGroup;
Form.Label = FormLabel;
Form.Text = FormText;
Form.Select = FormSelect;
Form.Range = FormRange;
Form.Floating = FormFloating;
Form.FloatingLabel = FloatingLabel;

// InputGroup compound components
InputGroup.Text = InputGroupText;

// FormControl compound components  
FormControl.Feedback = Feedback;

InputGroup Usage Examples:

import { InputGroup, Form, Button } from "react-bootstrap";

// Input with prepended text
<InputGroup className="mb-3">
  <InputGroup.Text>@</InputGroup.Text>
  <Form.Control placeholder="Username" />
</InputGroup>

// Input with appended button
<InputGroup className="mb-3">
  <Form.Control placeholder="Search..." />
  <Button variant="outline-secondary" id="button-addon2">
    Search
  </Button>
</InputGroup>

// Input with both prepend and append
<InputGroup>
  <InputGroup.Text>$</InputGroup.Text>
  <Form.Control placeholder="0.00" />
  <InputGroup.Text>.00</InputGroup.Text>
</InputGroup>

Install with Tessl CLI