import Form from 'react-bootstrap/Form';function TextControlsExample() {return (<Form><Form.Group className="mb-3" controlId="exampleForm.ControlInput1"><Form.Label>Email address</Form.Label><Form.Control type="email" placeholder="name@example.com" /></Form.Group><Form.Group className="mb-3" controlId="exampleForm.ControlTextarea1"><Form.Label>Example textarea</Form.Label><Form.Control as="textarea" rows={3} /></Form.Group></Form>);}export default TextControlsExample;
在<FormControl>上使用size来更改输入的大小。
import Form from 'react-bootstrap/Form';function InputSizesExample() {return (<><Form.Control size="lg" type="text" placeholder="Large text" /><br /><Form.Control type="text" placeholder="Normal text" /><br /><Form.Control size="sm" type="text" placeholder="Small text" /></>);}export default InputSizesExample;
在输入框上添加disabled属性，使其呈现灰色外观并移除指针事件。
import Form from 'react-bootstrap/Form';function FormControlDisabledExample() {return (<><Form.Controltype="text"placeholder="Disabled input"aria-label="Disabled input example"disabledreadOnly/><br /><Form.Controltype="text"placeholder="Disabled readonly input"aria-label="Disabled input example"readOnly/></>);}export default FormControlDisabledExample;
在输入框上添加readOnly属性，以防止修改输入框的值。只读输入框看起来更浅（就像禁用的输入框一样），但保留标准光标。
import Form from 'react-bootstrap/Form';function InputReadOnlyExample() {return (<Form.Control type="text" placeholder="Readonly input here..." readOnly />);}export default InputReadOnlyExample;
如果你想让表单中的只读元素以纯文本样式显示，请在FormControls上使用plaintext属性，以移除默认的表单字段样式并保留正确的边距和填充。
import Col from 'react-bootstrap/Col';import Form from 'react-bootstrap/Form';import Row from 'react-bootstrap/Row';function PlaintextExample() {return (<Form><Form.Group as={Row} className="mb-3" controlId="formPlaintextEmail"><Form.Label column sm="2"></Form.Label><Col sm="10"><Form.Control plaintext readOnly defaultValue="email@example.com" /></Col></Form.Group><Form.Group as={Row} className="mb-3" controlId="formPlaintextPassword"><Form.Label column sm="2">Password</Form.Label><Col sm="10"><Form.Control type="password" placeholder="Password" /></Col></Form.Group></Form>);}export default PlaintextExample;
import Form from 'react-bootstrap/Form';function FormFileExample() {return (<><Form.Group controlId="formFile" className="mb-3"><Form.Label>Default file input example</Form.Label><Form.Control type="file" /></Form.Group><Form.Group controlId="formFileMultiple" className="mb-3"><Form.Label>Multiple files input example</Form.Label><Form.Control type="file" multiple /></Form.Group><Form.Group controlId="formFileDisabled" className="mb-3"><Form.Label>Disabled file input example</Form.Label><Form.Control type="file" disabled /></Form.Group><Form.Group controlId="formFileSm" className="mb-3"><Form.Label>Small file input example</Form.Label><Form.Control type="file" size="sm" /></Form.Group><Form.Group controlId="formFileLg" className="mb-3"><Form.Label>Large file input example</Form.Label><Form.Control type="file" size="lg" /></Form.Group></>);}export default FormFileExample;
import Form from 'react-bootstrap/Form';function ColorPickerExample() {return (<><Form.Label htmlFor="exampleColorInput">Color picker</Form.Label><Form.Controltype="color"id="exampleColorInput"defaultValue="#563d7c"title="Choose your color"/></>);}export default ColorPickerExample;