CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-reactstrap

React Bootstrap components providing stateless Bootstrap 5 components for React applications

—

Pending
Overview
Eval results
Files

forms.mddocs/

Form Components

Form elements including inputs, labels, form groups, validation components, and input group components for creating accessible and styled forms.

Capabilities

Form

Form wrapper component that provides proper form styling and layout options.

/**
 * Form wrapper component
 * @param props.inline - Apply inline form styling (deprecated in Bootstrap 5)
 * @param props.tag - HTML element to render as (default: 'form')
 * @param props.innerRef - Ref forwarding
 * @param props.className - Additional CSS classes
 * @param props.cssModule - CSS Module mapping object
 * @param props.children - Form content and components
 */
function Form(props: {
  inline?: boolean;
  tag?: React.ElementType;
  innerRef?: React.Ref;
  className?: string;
  cssModule?: object;
  children?: React.ReactNode;
  [key: string]: any;
}): JSX.Element;

Input

Versatile input component supporting all HTML input types with Bootstrap styling and validation states.

/**
 * Form input component with extensive type support
 * @param props.type - Input type (text, email, password, number, select, textarea, etc.)
 * @param props.size - Input size (string or number, Bootstrap recommends 'sm' or 'lg')
 * @param props.bsSize - Bootstrap-specific size prop ('sm' or 'lg')
 * @param props.state - Validation state (deprecated, use valid/invalid)
 * @param props.valid - Mark input as valid
 * @param props.invalid - Mark input as invalid
 * @param props.tag - HTML element to render as (auto-determined by type)
 * @param props.innerRef - Ref forwarding for accessing the focus() method
 * @param props.plaintext - Render as plain text (form-control-plaintext)
 * @param props.addon - Style for input group usage
 * @param props.className - Additional CSS classes
 * @param props.cssModule - CSS Module mapping object
 */
function Input(props: {
  type?: 'text' | 'email' | 'select' | 'file' | 'radio' | 'checkbox' | 'textarea' | 'button' | 'reset' | 'submit' | 'date' | 'datetime-local' | 'hidden' | 'image' | 'month' | 'number' | 'range' | 'search' | 'tel' | 'url' | 'week' | 'password' | 'datetime' | 'time' | 'color' | 'switch';
  size?: string | number;
  bsSize?: 'sm' | 'lg';
  state?: string;
  valid?: boolean;
  invalid?: boolean;
  tag?: React.ElementType;
  innerRef?: React.Ref;
  plaintext?: boolean;
  addon?: boolean;
  className?: string;
  cssModule?: object;
  children?: React.ReactNode;
  [key: string]: any;
}): JSX.Element;

Label

Form label component for associating labels with form controls and improving accessibility.

/**
 * Form label component
 * @param props.hidden - Visually hide label (screen reader accessible)
 * @param props.check - Apply checkbox/radio label styling
 * @param props.size - Label size for specific input sizes
 * @param props.for - HTML for attribute (input ID association)
 * @param props.tag - HTML element to render as (default: 'label')
 * @param props.className - Additional CSS classes
 * @param props.cssModule - CSS Module mapping object
 * @param props.xs - Column width for horizontal forms (extra small screens)
 * @param props.sm - Column width for horizontal forms (small screens and up)
 * @param props.md - Column width for horizontal forms (medium screens and up)
 * @param props.lg - Column width for horizontal forms (large screens and up)
 * @param props.xl - Column width for horizontal forms (extra large screens and up)
 * @param props.children - Label text content
 */
function Label(props: {
  hidden?: boolean;
  check?: boolean;
  size?: string;
  for?: string;
  tag?: React.ElementType;
  className?: string;
  cssModule?: object;
  xs?: string | number;
  sm?: string | number;
  md?: string | number;
  lg?: string | number;
  xl?: string | number;
  children?: React.ReactNode;
  [key: string]: any;
}): JSX.Element;

FormGroup

Form group wrapper component for organizing form elements with proper spacing and layout.

/**
 * Form group wrapper for organizing form elements  
 * @param props.row - Apply row layout for horizontal forms
 * @param props.check - Apply styling for checkbox/radio groups
 * @param props.inline - Apply inline styling for checkbox/radio groups
 * @param props.disabled - Apply disabled styling to group
 * @param props.tag - HTML element to render as (default: 'div')
 * @param props.className - Additional CSS classes
 * @param props.cssModule - CSS Module mapping object
 * @param props.children - Form elements (Label, Input, FormFeedback, etc.)
 */
function FormGroup(props: {
  row?: boolean;
  check?: boolean;
  inline?: boolean;
  disabled?: boolean;
  tag?: React.ElementType;
  className?: string;
  cssModule?: object;
  children?: React.ReactNode;
}): JSX.Element;

FormFeedback

Form validation feedback component for displaying validation messages and states.

/**
 * Form validation feedback component
 * @param props.valid - Display valid/success feedback styling
 * @param props.tooltip - Display as tooltip-style feedback
 * @param props.tag - HTML element to render as (default: 'div')
 * @param props.className - Additional CSS classes
 * @param props.cssModule - CSS Module mapping object
 * @param props.children - Feedback message content
 */
function FormFeedback(props: {
  valid?: boolean;
  tooltip?: boolean;
  tag?: React.ElementType;
  className?: string;
  cssModule?: object;
  children?: React.ReactNode;
}): JSX.Element;

FormText

Form help text component for providing additional information and guidance.

/**
 * Form help text component
 * @param props.inline - Display inline with form elements (deprecated)
 * @param props.tag - HTML element to render as (default: 'small')
 * @param props.color - Text color theme
 * @param props.className - Additional CSS classes
 * @param props.cssModule - CSS Module mapping object
 * @param props.children - Help text content
 */
function FormText(props: {
  inline?: boolean;
  tag?: React.ElementType;
  color?: string;
  className?: string;
  cssModule?: object;
  children?: React.ReactNode;
}): JSX.Element;

InputGroup

Input group component for combining inputs with addons, buttons, and other elements.

/**
 * Input group component for combining inputs with addons
 * @param props.tag - HTML element to render as (default: 'div')
 * @param props.size - Size for entire input group ('sm' or 'lg')
 * @param props.className - Additional CSS classes
 * @param props.cssModule - CSS Module mapping object
 * @param props.children - Input, InputGroupText, Button, and other components
 */
function InputGroup(props: {
  tag?: React.ElementType;
  size?: 'sm' | 'lg';
  className?: string;
  cssModule?: object;
  children?: React.ReactNode;
}): JSX.Element;

InputGroupText

Input group text/addon component for adding text, icons, or other content to input groups.

/**
 * Input group text/addon component
 * @param props.tag - HTML element to render as (default: 'span')
 * @param props.className - Additional CSS classes
 * @param props.cssModule - CSS Module mapping object
 * @param props.children - Text, icons, or other addon content
 */
function InputGroupText(props: {
  tag?: React.ElementType;
  className?: string;
  cssModule?: object;
  children?: React.ReactNode;
}): JSX.Element;

Usage Examples

Basic Form

import { 
  Form, 
  FormGroup, 
  Label, 
  Input, 
  Button 
} from 'reactstrap';

function BasicForm() {
  return (
    <Form>
      <FormGroup>
        <Label for="email">Email</Label>
        <Input 
          type="email" 
          name="email" 
          id="email" 
          placeholder="Enter your email" 
        />
      </FormGroup>
      <FormGroup>
        <Label for="password">Password</Label>
        <Input 
          type="password" 
          name="password" 
          id="password" 
          placeholder="Enter your password" 
        />
      </FormGroup>
      <Button color="primary">Submit</Button>
    </Form>
  );
}

Form Validation

import { 
  Form, 
  FormGroup, 
  Label, 
  Input, 
  FormFeedback, 
  FormText 
} from 'reactstrap';

function ValidationForm() {
  const [form, setForm] = useState({
    email: '',
    password: ''
  });
  const [errors, setErrors] = useState({});

  const validateEmail = (email) => {
    return /\S+@\S+\.\S+/.test(email);
  };

  return (
    <Form>
      <FormGroup>
        <Label for="email">Email</Label>
        <Input 
          type="email" 
          name="email" 
          id="email"
          value={form.email}
          onChange={(e) => setForm({...form, email: e.target.value})}
          valid={form.email && validateEmail(form.email)}
          invalid={form.email && !validateEmail(form.email)}
        />
        <FormFeedback valid>
          Looks good!
        </FormFeedback>
        <FormFeedback>
          Please provide a valid email address.
        </FormFeedback>
        <FormText>
          We'll never share your email with anyone else.
        </FormText>
      </FormGroup>
      
      <FormGroup>
        <Label for="password">Password</Label>
        <Input 
          type="password" 
          name="password" 
          id="password"
          value={form.password}
          onChange={(e) => setForm({...form, password: e.target.value})}
          valid={form.password && form.password.length >= 6}
          invalid={form.password && form.password.length < 6}
        />
        <FormFeedback valid>
          Strong password!
        </FormFeedback>
        <FormFeedback>
          Password must be at least 6 characters long.
        </FormFeedback>
      </FormGroup>
    </Form>
  );
}

Input Types

function InputTypes() {
  return (
    <Form>
      <FormGroup>
        <Label for="textInput">Text Input</Label>
        <Input type="text" name="text" id="textInput" />
      </FormGroup>
      
      <FormGroup>
        <Label for="emailInput">Email Input</Label>
        <Input type="email" name="email" id="emailInput" />
      </FormGroup>
      
      <FormGroup>
        <Label for="passwordInput">Password Input</Label>
        <Input type="password" name="password" id="passwordInput" />
      </FormGroup>
      
      <FormGroup>
        <Label for="numberInput">Number Input</Label>
        <Input type="number" name="number" id="numberInput" />
      </FormGroup>
      
      <FormGroup>
        <Label for="dateInput">Date Input</Label>
        <Input type="date" name="date" id="dateInput" />
      </FormGroup>
      
      <FormGroup>
        <Label for="selectInput">Select Input</Label>
        <Input type="select" name="select" id="selectInput">
          <option>Choose...</option>
          <option>Option 1</option>
          <option>Option 2</option>
          <option>Option 3</option>
        </Input>
      </FormGroup>
      
      <FormGroup>
        <Label for="textareaInput">Textarea</Label>
        <Input type="textarea" name="textarea" id="textareaInput" />
      </FormGroup>
      
      <FormGroup>
        <Label for="fileInput">File Input</Label>
        <Input type="file" name="file" id="fileInput" />
      </FormGroup>
    </Form>
  );
}

Checkboxes and Radios

function CheckboxRadioForm() {
  return (
    <Form>
      <FormGroup check>
        <Label check>
          <Input type="checkbox" />
          Check me out
        </Label>
      </FormGroup>
      
      <FormGroup check inline>
        <Label check>
          <Input type="checkbox" />
          Inline checkbox 1
        </Label>
      </FormGroup>
      <FormGroup check inline>
        <Label check>
          <Input type="checkbox" />
          Inline checkbox 2
        </Label>
      </FormGroup>
      
      <FormGroup check>
        <Label check>
          <Input type="radio" name="radio1" />
          Option one
        </Label>
      </FormGroup>
      <FormGroup check>
        <Label check>
          <Input type="radio" name="radio1" />
          Option two
        </Label>
      </FormGroup>
      
      <FormGroup check disabled>
        <Label check>
          <Input type="radio" name="radio1" disabled />
          Disabled option
        </Label>
      </FormGroup>
    </Form>
  );
}

Input Sizes

function InputSizes() {
  return (
    <Form>
      <FormGroup>
        <Label for="largePlaintextInput">Large Input</Label>
        <Input 
          type="text" 
          size="lg" 
          name="large" 
          id="largePlaintextInput" 
          placeholder="Large input" 
        />
      </FormGroup>
      
      <FormGroup>
        <Label for="defaultInput">Default Input</Label>
        <Input 
          type="text" 
          name="default" 
          id="defaultInput" 
          placeholder="Default input" 
        />
      </FormGroup>
      
      <FormGroup>
        <Label for="smallInput">Small Input</Label>
        <Input 
          type="text" 
          size="sm" 
          name="small" 
          id="smallInput" 
          placeholder="Small input" 
        />
      </FormGroup>
    </Form>
  );
}

Input Groups

import { 
  InputGroup, 
  InputGroupText, 
  Input, 
  Button 
} from 'reactstrap';

function InputGroups() {
  return (
    <div>
      <InputGroup>
        <InputGroupText>@</InputGroupText>
        <Input placeholder="Username" />
      </InputGroup>
      <br />
      
      <InputGroup>
        <Input placeholder="Recipient's username" />
        <InputGroupText>@example.com</InputGroupText>
      </InputGroup>
      <br />
      
      <InputGroup>
        <InputGroupText>$</InputGroupText>
        <Input placeholder="Amount" />
        <InputGroupText>.00</InputGroupText>
      </InputGroup>
      <br />
      
      <InputGroup>
        <Input placeholder="Search for..." />
        <Button color="secondary">Go!</Button>
      </InputGroup>
      <br />
      
      <InputGroup size="lg">
        <InputGroupText>Large</InputGroupText>
        <Input />
      </InputGroup>
      <br />
      
      <InputGroup size="sm">
        <InputGroupText>Small</InputGroupText>
        <Input />
      </InputGroup>
    </div>
  );
}

Horizontal Form

import { 
  Form, 
  FormGroup, 
  Label, 
  Input, 
  Col, 
  Row, 
  Button 
} from 'reactstrap';

function HorizontalForm() {
  return (
    <Form>
      <FormGroup row>
        <Label for="email" sm={2}>Email</Label>
        <Col sm={10}>
          <Input type="email" name="email" id="email" placeholder="Email" />
        </Col>
      </FormGroup>
      
      <FormGroup row>
        <Label for="password" sm={2}>Password</Label>
        <Col sm={10}>
          <Input type="password" name="password" id="password" placeholder="Password" />
        </Col>
      </FormGroup>
      
      <FormGroup row>
        <Label for="select" sm={2}>Select</Label>
        <Col sm={10}>
          <Input type="select" name="select" id="select">
            <option>Choose...</option>
            <option>First</option>
            <option>Second</option>
          </Input>
        </Col>
      </FormGroup>
      
      <FormGroup row>
        <Col sm={{ size: 10, offset: 2 }}>
          <Button>Submit</Button>
        </Col>
      </FormGroup>
    </Form>
  );
}

Plaintext Inputs

function PlaintextInputs() {
  return (
    <Form>
      <FormGroup row>
        <Label for="staticEmail" sm={2}>Email</Label>
        <Col sm={10}>
          <Input 
            plaintext 
            readOnly 
            defaultValue="email@example.com" 
            name="staticEmail" 
            id="staticEmail" 
          />
        </Col>
      </FormGroup>
      
      <FormGroup row>
        <Label for="inputPassword" sm={2}>Password</Label>
        <Col sm={10}>
          <Input 
            type="password" 
            name="password" 
            id="inputPassword" 
            placeholder="Password" 
          />
        </Col>
      </FormGroup>
    </Form>
  );
}

Install with Tessl CLI

npx tessl i tessl/npm-reactstrap

docs

buttons.md

cards.md

data-display.md

feedback.md

forms.md

index.md

interactive.md

layout.md

navigation.md

utilities.md

tile.json