Form

Floating Labels

<Form>
  <Form.Row>
    <Form.Group as={Col} controlId="formGridEmail">
      <Form.Control
        type="email"
        floatingLabel="Email"
      />
      <Form.Text>
        This is the email that we'll send emails to.
      </Form.Text>
    </Form.Group>

    <Form.Group
      as={Col}
      controlId="formGridPassword"
      isInvalid
    >
      <Form.Control
        type="password"
        floatingLabel="Password"
      />
      <Form.Control.Feedback type="invalid">
        We don't like that password. Try a different one.
      </Form.Control.Feedback>
    </Form.Group>
  </Form.Row>

  <Form.Group
    controlId="formGridAddress1"
    isValid
  >
    <Form.Control floatingLabel="Address" />
    <Form.Control.Feedback type="valid">
      This is a nice place!
    </Form.Control.Feedback>
  </Form.Group>

  <Form.Row>
    <Form.Group as={Col} controlId="formGridCity">
      <Form.Control floatingLabel="City" />
    </Form.Group>

    <Form.Group as={Col} controlId="formGridState">
      <Form.Control floatingLabel="State" as="select">
        <option value="">Choose...</option>
        <option>...</option>
      </Form.Control>
    </Form.Group>

    <Form.Group as={Col} controlId="formGridZip">
      <Form.Control floatingLabel="Zip" />
    </Form.Group>
  </Form.Row>

  <Form.Group controlId="formSwitch">
    <Form.Switch>Check this switch</Form.Switch><br/>
    <Form.Switch disabled>disabled switch</Form.Switch>
  </Form.Group>

  <Form.Group controlId="whichColor">
    <Form.Label>
      Which color would you like?
    </Form.Label>
    <Form.RadioSet name="color">
      <Form.Radio value="red">Red</Form.Radio>
      <Form.Radio value="green">Green</Form.Radio>
      <Form.Radio value="blue">Blue</Form.Radio>
    </Form.RadioSet>
    <Form.Control.Feedback>
      The color you choose.
    </Form.Control.Feedback>
  </Form.Group>

  <Form.Group id="formGridCheckbox">
    <Form.Checkbox>Check me out</Form.Checkbox>
  </Form.Group>
  <div className="d-flex">
    <Button variant="primary" type="submit">
      Submit
    </Button>
  </div>
</Form>

Regular Labels

<Form>
  <Form.Row>
    <Form.Group as={Col} controlId="formGridEmail-2">
      <Form.Label>Email</Form.Label>
      <Form.Control type="email" placeholder="Enter email" />
      <Form.Text muted>
        This is the email that we'll send emails to.
      </Form.Text>
    </Form.Group>

    <Form.Group isInvalid as={Col} controlId="formGridPassword-2">
      <Form.Label>Password</Form.Label>
      <Form.Control type="password" placeholder="Password" />
      <Form.Control.Feedback type="invalid">
        We don't like that password. Try a different one.
      </Form.Control.Feedback>
    </Form.Group>
  </Form.Row>

  <Form.Group controlId="formGridAddress1-2">
    <Form.Label>Address</Form.Label>
    <Form.Control placeholder="1234 Main St" />
    <Form.Control.Feedback type="valid">
      This is a nice place!
    </Form.Control.Feedback>
  </Form.Group>

  <Form.Row>
    <Form.Group as={Col} controlId="formGridCity-2">
      <Form.Label>City</Form.Label>
      <Form.Control />
    </Form.Group>

    <Form.Group as={Col} controlId="formGridState-2">
      <Form.Label>State</Form.Label>
      <Form.Control as="select" defaultValue="Choose...">
        <option>Choose...</option>
        <option>...</option>
      </Form.Control>
    </Form.Group>

    <Form.Group as={Col} controlId="formGridZip-2">
      <Form.Label>Zip</Form.Label>
      <Form.Control />
    </Form.Group>
  </Form.Row>

  <Form.Group controlId="formSwitch-2">
    <Form.Switch>Check this switch</Form.Switch><br/>
    <Form.Switch disabled>disabled switch</Form.Switch>
  </Form.Group>

  <Form.Group id="formGridCheckbox-2">
      <Form.Checkbox>Check me out</Form.Checkbox>
  </Form.Group>
  <div className="d-flex">
    <Button variant="primary" type="submit">
      Submit
    </Button>
  </div>
</Form>

Form

A component for creating forms with proper layout, styling, and input handling.

Usage

import { Form, Button } from '@blendx-ui';

// Basic usage
function FormExample() {
  const handleSubmit = (event) => {
    event.preventDefault();
    // Form submission logic here
  };
  
  return (
    <Form onSubmit={handleSubmit}>
      <Form.Group controlId="formBasicEmail">
        <Form.Label>Email address</Form.Label>
        <Form.Control type="email" placeholder="Enter email" />
        <Form.Text className="text-muted">
          We'll never share your email with anyone else.
        </Form.Text>
      </Form.Group>

      <Form.Group controlId="formBasicPassword">
        <Form.Label>Password</Form.Label>
        <Form.Control type="password" placeholder="Password" />
      </Form.Group>
      
      <Form.Group controlId="formBasicCheckbox">
        <Form.Check type="checkbox" label="Remember me" />
      </Form.Group>
      
      <Button variant="primary" type="submit">
        Submit
      </Button>
    </Form>
  );
}

Props

Form Props

Prop	Type	Required	Default	Description
onSubmit	function	No	-	Handler called when form is submitted
validated	boolean	No	false	Adds built-in validation styles
inline	boolean	No	false	Display the form inline
className	string	No	-	Additional CSS classes
id	string	No	-	DOM id for the form
noValidate	boolean	No	false	Disable browser default validation
as	elementType	No	'form'	Component to render the form as

Form.Group Props

Prop	Type	Required	Default	Description
controlId	string	No	-	Sets id for control and label
as	elementType	No	'div'	Component to render the group as
className	string	No	-	Additional CSS classes

Form.Label Props

Prop	Type	Required	Default	Description
htmlFor	string	No	-	HTML for attribute
column	boolean or string	No	false	Render as a column form label
className	string	No	-	Additional CSS classes
visuallyHidden	boolean	No	false	Hide label visually while keeping it accessible

Form.Control Props

Prop	Type	Required	Default	Description
type	string	No	-	HTML input type
as	elementType	No	'input'	Component to render the control as
id	string	No	-	DOM id
size	string	No	-	Input size ('sm', 'lg')
plaintext	boolean	No	false	Render as plaintext
readOnly	boolean	No	false	Make input readonly
disabled	boolean	No	false	Disable the input
value	string	No	-	Input value
onChange	function	No	-	Callback fired when value changes
isValid	boolean	No	false	Manually style as valid
isInvalid	boolean	No	false	Manually style as invalid

Form.Check Props

Prop	Type	Required	Default	Description
type	string	No	'checkbox'	Type of input ('checkbox', 'radio', 'switch')
id	string	No	-	DOM id
label	node	No	-	Label for the control
disabled	boolean	No	false	Disable the control
isValid	boolean	No	false	Manually style as valid
isInvalid	boolean	No	false	Manually style as invalid
checked	boolean	No	-	Control checked state
onChange	function	No	-	Callback fired when state changes
custom	boolean	No	false	Use custom styling
inline	boolean	No	false	Display as inline

Parameters

onSubmit

• Parameters: (event: React.FormEvent<HTMLFormElement>) - The form submission event
• Returns: void

onChange (Form.Control)

• Parameters: (event: React.ChangeEvent<HTMLInputElement>) - The change event
• Returns: void

onChange (Form.Check)

• Parameters: (event: React.ChangeEvent<HTMLInputElement>) - The change event
• Returns: void

Return Value

Returns a form component with the following subcomponents:

• Form.Group - For grouping form controls with labels
• Form.Label - Label for form controls
• Form.Control - Form input controls (text, textarea, select, etc.)
• Form.Check - Checkbox and radio controls
• Form.Switch - Toggle switch control
• Form.Text - Helper text for form controls
• Form.File - File input control
• Form.Select - Select dropdown control
• Form.Range - Range input control
• Form.Feedback - Validation feedback

Examples

Basic Form with Validation

<Form noValidate validated={validated} onSubmit={handleSubmit}>
  <Form.Group 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 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>
  
  <Button type="submit">Submit form</Button>
</Form>

Inline Form

<Form inline>
  <Form.Label className="my-1 mr-2" htmlFor="inlineFormCustomSelectPref">
    Preference
  </Form.Label>
  <Form.Select 
    className="my-1 mr-sm-2" 
    id="inlineFormCustomSelectPref"
  >
    <option value="0">Choose...</option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
  </Form.Select>
  
  <Form.Check
    type="checkbox"
    className="my-1 mr-sm-2"
    id="customControlInline"
    label="Remember my preference"
  />
  
  <Button type="submit" className="my-1">
    Submit
  </Button>
</Form>

Form with Input Groups

<Form>
  <Form.Group controlId="formBasicEmail">
    <Form.Label>Email address</Form.Label>
    <InputGroup>
      <InputGroup.Prepend>
        <InputGroup.Text id="inputGroupPrepend">@</InputGroup.Text>
      </InputGroup.Prepend>
      <Form.Control
        type="text"
        placeholder="Username"
        aria-describedby="inputGroupPrepend"
      />
    </InputGroup>
  </Form.Group>
</Form>

Form with Checkboxes and Radios

<Form>
  <Form.Group>
    <Form.Label>Checkbox</Form.Label>
    <Form.Check 
      type="checkbox"
      id="default-checkbox"
      label="Default checkbox"
    />
    <Form.Check 
      type="checkbox"
      id="custom-checkbox"
      label="Custom checkbox"
      custom
    />
  </Form.Group>
  
  <Form.Group>
    <Form.Label>Radio buttons</Form.Label>
    <Form.Check 
      type="radio"
      label="Option 1"
      name="radioGroup"
      id="radio1"
    />
    <Form.Check 
      type="radio"
      label="Option 2"
      name="radioGroup"
      id="radio2"
    />
  </Form.Group>
</Form>

Form with Switch

<Form>
  <Form.Check 
    type="switch"
    id="custom-switch"
    label="Toggle this switch"
  />
  <Form.Check 
    disabled
    type="switch"
    label="Disabled switch"
    id="disabled-custom-switch"
  />
</Form>

Accessibility

• Properly associates labels with form controls using controlId
• Supports screen readers through proper labeling
• Validation messages are accessible
• Keyboard navigation for all form elements
• Visual feedback for validation states

Best Practices

• Always use Labels for form controls
• Group related form controls with Form.Group
• Use validation for critical inputs
• Provide clear validation feedback
• Use consistent styling for related forms
• Consider using a form library (like Formik or React Hook Form) for complex forms
• Always handle form submission and prevent the default action

Related Components

• InputGroup
• Button
• FormControl
• ValidationMessage
• ValidationFormGroup
• Dropdown
• Select
• TextArea

Notes

• Based on React Bootstrap's Form component
• For controlled components, always provide both value and onChange handler
• For uncontrolled components, use defaultValue instead of value

Dependencies

Repository	Usage Count
frontend-app-course-authoring	1
frontend-app-account	1

Detailed usage locations:

frontend-app-course-authoring

• src/cohorts/CohortDrawer.jsx

frontend-app-account

• src/BlendxSettings/profile-details/index.jsx