reactstrap#FormText JavaScript Examples
The following examples show how to use
reactstrap#FormText.
You can vote up the ones you like or vote down the ones you don't like,
and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
| Source File: newAuctionAssembler.js From ErgoAuctionHouse with MIT License | 4 votes |
|
render() {
return (
<Modal
size="lg"
isOpen={this.props.isOpen}
toggle={this.props.close}
>
<ModalHeader toggle={this.props.close}>
<span className="fsize-1 text-muted">New Auction</span>
</ModalHeader>
<ModalBody>
<Container>
<Row>
<SyncLoader
css={override}
size={8}
color={'#0086d3'}
loading={this.state.modalLoading}
/>
</Row>
<Form>
{isYoroi() && <Row>
<Col>
<FormGroup>
<Label for="bid">Token to Auction</Label>
<Select
className="basic-single"
classNamePrefix="select"
isDisabled={false}
isLoading={this.state.tokenLoading}
defaultValue={this.state.selectedToken}
value={this.state.selectedToken}
isClearable={false}
isRtl={false}
isSearchable={true}
name="color"
options={this.state.tokens}
onChange={(changed) => this.setState({selectedToken: changed})}
/>
</FormGroup>
<FormText>
You own these tokens in your Yoroi wallet, select the one you'd like to auction.
</FormText>
</Col>
{this.state.selectedToken !== null && this.state.selectedToken.amount > 1 && <Col>
<FormGroup>
<Label for="auctionStep">
Select Amount
</Label>
<InputGroup>
<Input
type="number"
value={this.state.tokenAmount}
onChange={(e) => {
this.setState({
tokenAmount: e.target.value,
});
}}
/>
</InputGroup>
<FormText>
You have {this.state.selectedToken.amount} of this token, specify how many
of those you want to auction.
</FormText>
</FormGroup>
</Col>}
</Row>}
<Row>
<Col md="6">
<FormGroup>
<Label for="bid">Minimum Bid</Label>
<InputGroup>
<Input
type="text"
invalid={
currencyToLong(
this.state.initialBid,
this.state.currency.decimal
) < this.state.currency.minSupported
}
value={
this.state.initialBid
}
onChange={(e) => {
if (
isFloat(
e.target.value
)
) {
this.setState({
initialBid:
e.target
.value,
});
}
}}
id="bid"
/>
<InputGroupAddon addonType="append">
<select onChange={(curr) => this.changeCurrency(curr.target.value)}>
{Object.keys(supportedCurrencies).map(res => {
return <option>{res}</option>
})}
</select>
</InputGroupAddon>
<FormFeedback invalid>
Must be at
least {longToCurrency(this.state.currency.minSupported, this.state.currency.decimal)} {this.state.currency.name}
</FormFeedback>
</InputGroup>
<FormText>
<b>Specify the currency</b> and the minimum bid amount; the first bid will be at least this amount. Note that you need a little bit
of this currency in your wallet to start the auction!
</FormText>
</FormGroup>
</Col>
<Col md="6">
<FormGroup>
<Label for="duration">
Auction End Time
</Label>
<InputGroup>
<DateTimePicker value={this.state.endTime} onChange={(tm => {
this.setState({endTime: tm})
})}/></InputGroup>
<FormText>
Your auction will end at this time.
</FormText>
</FormGroup>
</Col>
</Row>
<div className="divider"/>
<Row>
<Col md="6">
<FormGroup>
<Label for="auctionStep">
Minimum Step
</Label>
<InputGroup>
<Input
type="text"
invalid={
currencyToLong(this.state.auctionStep, this.state.currency.decimal) < this.state.currency.minSupported
}
value={
this.state.auctionStep
}
onChange={(e) => {
if (
isFloat(
e.target.value
)
) {
this.setState({
auctionStep:
e.target
.value,
});
}
}}
id="auctionStep"
/>
<InputGroupAddon addonType="append">
<InputGroupText>
{this.state.currency.name}
</InputGroupText>
</InputGroupAddon>
<FormFeedback invalid>
Must be at
least {longToCurrency(this.state.currency.minSupported, this.state.currency.decimal)} {this.state.currency.name}
</FormFeedback>
</InputGroup>
<FormText>
The bidder must increase the bid
by at least this value.
</FormText>
</FormGroup>
</Col>
<Col md="6">
<FormGroup>
<Label>
Instant Buy Amount
</Label>
<InputGroup>
<InputGroupAddon addonType="prepend">
<InputGroupText>
<Label check>
<Input
checked={
this.state
.enableInstantBuy
}
onChange={(e) =>
this.setState(
{
enableInstantBuy:
e
.target
.checked,
}
)
}
className="mr-2"
addon
type="checkbox"
/>
Enable instant buy
</Label>
</InputGroupText>
</InputGroupAddon>
<Input
type="text"
invalid={
this.state.enableInstantBuy && currencyToLong(this.state.instantAmount, this.state.currency.decimal) <= currencyToLong(this.state.initialBid, this.state.currency.decimal)
}
disabled={!this.state.enableInstantBuy}
value={
this.state.instantAmount
}
onChange={(e) => {
if (
isFloat(
e.target.value
)
) {
this.setState({
instantAmount:
e.target
.value,
});
}
}}
id="auctionStep"
/>
<InputGroupAddon addonType="append">
<InputGroupText>
{this.state.currency.name}
</InputGroupText>
</InputGroupAddon>
<FormFeedback invalid>
Instant buy amount must be bigger than the Minimum bid!
</FormFeedback>
</InputGroup>
<FormText>
If you enable this, anyone can instantly win your auction by bidding by at
least this
amount.
</FormText>
</FormGroup>
</Col>
</Row>
<div className="divider"/>
<FormGroup>
<Label for="description">Description</Label>
<Input
invalid={
this.state.description !== undefined &&
this.state.description.length > 250
}
value={this.state.description}
onChange={(event) =>
this.setState({
description: event.target.value,
})
}
type="textarea"
name="text"
id="description"
/>
<FormFeedback invalid>
At most 250 characters!
</FormFeedback>
<FormText>
You can explain about the token you are
auctioning here.
</FormText>
</FormGroup>
<FormText>
<b data-tip='ok'>* Auto Extend feature is by default enabled for all auctions.</b>
</FormText>
</Form>
</Container>
</ModalBody>
<ModalFooter>
<Button
className="ml mr-2 btn-transition"
color="secondary"
onClick={this.props.close}
>
Cancel
</Button>
<Button
className="mr-2 btn-transition"
color="secondary"
disabled={!this.canStartAuction() || this.state.tokenLoading}
onClick={() => this.startAuction()}
>
Create Auction
</Button>
</ModalFooter>
</Modal>
);
}
Example #2
| Source File: placeBid.js From ErgoAuctionHouse with MIT License | 4 votes |
|
render() {
return (
<span>
<FakeModal bid={this.state.bid} modal={this.state.modal} box={this.state.box}
original={this.state.original} isOpen={this.state.fakeOpen}
close={() => this.setState({fakeOpen: !this.state.fakeOpen})}/>
<Modal
isOpen={this.props.isOpen}
toggle={this.props.close}
className={this.props.className}
>
<ModalHeader toggle={this.props.close}>
<span className="fsize-1 text-muted">
New bid for{' '}
{friendlyToken(this.props.box.assets[0], false, 5)}
</span>
</ModalHeader>
<ModalBody>
<Container>
<Row>
<SyncLoader
css={override}
size={8}
color={'#0086d3'}
loading={this.state.modalLoading}
/>
</Row>
<FormGroup>
<InputGroup>
<Input
type="number"
value={this.state.bidAmount}
invalid={
currencyToLong(this.state.bidAmount, supportedCurrencies[this.props.box.currency].decimal) < this.props.box.nextBid
}
onChange={(e) => {
if (isFloat(e.target.value)) {
this.setState({
bidAmount: e.target.value,
});
}
}}
id="bidAmount"
/>
<InputGroupAddon addonType="append">
<InputGroupText>{this.props.box.currency}</InputGroupText>
</InputGroupAddon>
<FormFeedback invalid>
Minimum bid value for this auction is{' '}
{longToCurrency(this.props.box.nextBid, -1, this.props.box.currency)}{' '}
{this.props.box.currency}
</FormFeedback>
</InputGroup>
<FormText>Specify your bid amount.</FormText>
</FormGroup>
</Container>
</ModalBody>
<ModalFooter>
<Button
className="ml mr-2 btn-transition"
color="secondary"
onClick={this.props.close}
>
Cancel
</Button>
<Button
className="mr-2 btn-transition"
color="secondary"
disabled={
currencyToLong(this.state.bidAmount, supportedCurrencies[this.props.box.currency].decimal) <
this.props.box.nextBid ||
this.state.modalLoading
}
onClick={this.placeBid}
>
Place Bid
</Button>
</ModalFooter>
</Modal>
</span>
);
}
Example #3
| Source File: newArtwork.js From ErgoAuctionHouse with MIT License | 4 votes |
|
render() {
return (
<Fragment>
<Modal
size="md"
isOpen={this.props.isOpen}
toggle={() => this.props.close()}
>
<ModalHeader toggle={this.props.close}>
<span className="fsize-1 text-muted">
Creating new item
</span>
</ModalHeader>
<ModalBody>
<div
style={{
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
}}
>
<fieldset disabled={this.state.loading}>
<Form>
<FormGroup>
<Label for="tokenName">Select the Artwork *</Label>
<InputGroup>
{/*<Basic/>*/}
{/*<ImageAudioVideo/>*/}
<Dropzone onDrop={(f) => {
this.hashFile(f[0])
}}
accept="image/*,audio/*,video/*"
multiple={false}
inputContent={(files, extra) => (extra.reject ? 'Image, audio and video files only' : 'Drag Files')}
styles={{
dropzoneReject: {borderColor: 'red', backgroundColor: '#DAA'},
inputLabel: (files, extra) => (extra.reject ? {color: 'red'} : {}),
}}
>
{({getRootProps, getInputProps}) => (
<div {...getRootProps({className: "dropzone"})}>
<input {...getInputProps()} />
<p>drag & drop file or browse the artwork on your device</p>
</div>
)}
</Dropzone>
</InputGroup>
<FormText>{this.state.file ? this.state.file.name : 'select your artwork file (picture, video or audio)'}
<b>{this.state.file ? ' - ' + this.getFileType(this.state.file) + ' artwork' : ''}</b>
</FormText>
</FormGroup>
{this.state.file && this.getFileType(this.state.file) === 'audio' && <FormGroup>
<InputGroup>
<Dropzone onDrop={(f) => {
this.setState({audioCover: f[0]})
}}
accept="image/*"
multiple={false}
>
{({getRootProps, getInputProps}) => (
<div {...getRootProps({className: "dropzone"})}>
<input {...getInputProps()} />
<p>drag & drop file or browse the audio cover on your device</p>
</div>
)}
</Dropzone>
</InputGroup>
<FormText>{this.state.audioCover ? this.state.audioCover.name : 'select the audio image cover - this is optional'} </FormText>
</FormGroup>}
<FormGroup>
<Label for="tokenName">Quantity*</Label>
<InputGroup>
<Input
type="number"
value={this.state.quantity}
onChange={(e) => {
this.setState({quantity: e.target.value})
}}
id="quantity"
/>
</InputGroup>
<FormText>Issuance quantity
{parseInt(this.state.quantity) > 1 &&
<b>{' - '}No longer considered to be NFT! Set to one for NFT.</b>}
</FormText>
</FormGroup>
<FormGroup>
<Label for="tokenName">Name*</Label>
<InputGroup>
<Input
value={this.state.name}
onChange={(e) => {
this.setState({name: e.target.value})
}}
id="tokenName"
/>
</InputGroup>
<FormText>artwork name</FormText>
</FormGroup>
<FormGroup>
<Label for="description">Description</Label>
<InputGroup>
<Input
type="textarea"
value={this.state.description}
onChange={(e) => {
this.setState({description: e.target.value})
}}
id="description"
/>
</InputGroup>
<FormText>description of your artwork; anything to represent it to
others</FormText>
</FormGroup>
<FormGroup>
<Label className="mb-3" for="tokenName">Royalty Percentage*</Label>
<InputGroup className="mb-2">
<Range
step={1}
min={0}
max={10}
values={this.state.values}
onChange={(values) => this.setState({ values })}
renderTrack={({ props, children }) => (
<div
{...props}
style={{
...props.style,
height: '4px',
width: '100%',
backgroundColor: '#ccc'
}}
>
{children}
</div>
)}
renderThumb={({ props }) => (
<div
{...props}
style={{
...props.style,
height: '15px',
width: '25px',
backgroundColor: '#999'
}}
/>
)}
/>
</InputGroup>
<FormText>You will receive {this.state.values[0]}% share on secondary sales</FormText>
</FormGroup>
</Form>
</fieldset>
</div>
</ModalBody>
<ModalFooter>
<BeatLoader
size={8}
color={'#0b473e'}
loading={this.state.loading}
/>
<Button
className="ml mr-2 btn-transition"
color="secondary"
onClick={() => this.props.close()}
>
Cancel
</Button>
<Button
className="mr-2 btn-transition"
color="secondary"
disabled={!this.okToIssue()}
onClick={this.issue}
>
Issue
</Button>
</ModalFooter>
</Modal>
</Fragment>
);
}
Example #4
| Source File: refund.js From ErgoAuctionHouse with MIT License | 4 votes |
|
render() {
return (
<Fragment>
<Modal
size="md"
isOpen={this.props.isOpen}
toggle={() => {
this.setState({txId: null})
this.props.close()
}}
>
<ModalHeader
toggle={() => {
this.setState({txId: null})
this.props.close()
}}
>
<span className="fsize-1 text-muted">
Refund stuck funds
</span>
</ModalHeader>
<ModalBody>
<div
style={{
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
}}
>
<fieldset disabled={this.state.loading}>
<Form>
{this.state.txId === null && <FormGroup>
<Label for="tokenName">Proxy Address</Label>
<InputGroup>
<Input
value={this.state.proxyContract}
onChange={(e) => {
this.setState({proxyContract: e.target.value})
}}
id="proxy"
/>
</InputGroup>
<FormText>
This is the address you've sent your funds to.
</FormText>
</FormGroup>}
{this.state.txId !== null && <FormGroup>
<a target='_blank' href={getTxUrl(this.state.txId)}>See the refund transaction</a>
</FormGroup>}
</Form>
</fieldset>
</div>
</ModalBody>
<ModalFooter>
<BeatLoader
size={8}
color={'#0b473e'}
loading={this.state.loading}
/>
<Button
className="ml mr-2 btn-transition"
color="secondary"
onClick={() => {
this.setState({txId: null})
this.props.close()
}}
>
Close
</Button>
<Button
className="mr-2 btn-transition"
color="secondary"
onClick={this.refund}
>
Send Refund
</Button>
</ModalFooter>
</Modal>
</Fragment>
);
}
Example #5
| Source File: WalletModal.js From ErgoAuctionHouse with MIT License | 4 votes |
|
render() {
return (
<span className="mb-2 mr-2" style={{display:'flex',alignItems:'center'}}>
{/*{this.walletOk() ? <p>ok</p> : <p>fuck no</p>}*/}
<NotificationCenter/>
<div className="notificationContainer " onClick={this.toggle}>
<span className="notificationIcon pe-7s-wallet font-weight-bold"/>
</div>
<Modal
isOpen={this.state.modal}
toggle={this.toggle}
className={this.props.className}
>
<ModalHeader toggle={this.toggle}>
<div className="btn-actions-pane-right">
<Button
outline
className={
'mr-2 ml-2 btn-wide btn-pill ' +
classnames({
active:
this.state.activeTab === 'yoroi',
})
}
color="light"
onClick={() => {
this.toggleTab('yoroi');
}}
>
<img
style={{height: '20px', width: '20px'}}
src={yoroiWallet}
/>
<span className="ml-2">Yoroi Wallet</span>
</Button>
<Button
outline
className={
'mr-2 ml-2 btn-wide btn-pill ' +
classnames({
active:
this.state.activeTab ===
'assembler',
})
}
color="light"
onClick={() => {
this.toggleTab('assembler');
}}
>
<span>Any Wallet</span>
</Button>
</div>
</ModalHeader>
<ModalBody>
<TabContent activeTab={this.state.activeTab}>
<TabPane tabId="yoroi">
<p>
Connects to your Yoroi wallet.
</p>
<p>
Currently, you should use <a target='_blank' href='https://chrome.google.com/webstore/detail/yoroi-nightly/poonlenmfdfbjfeeballhiibknlknepo?hl=en&authuser=0'>Yoroi Nightly</a>
{' '}with <a target='_blank' href='https://chrome.google.com/webstore/detail/yoroi-ergo-dapp-connector/chifollcalpmjdiokipacefnpmbgjnle/related?hl=en&authuser=0'>Ergo dapp Connector</a>
{' '}to be able to use this section.
</p>
</TabPane>
<TabPane tabId="assembler">
<p>
You can use <b>any wallet</b> including <b>Yoroi</b> and <b>Ergo Wallet Android</b> to place bid and start new auctions.
</p>
{/*<p>*/}
{/* This uses the assembler service which is an intermediate*/}
{/* step; you can find out more about it{' '}*/}
{/* <a*/}
{/* target="_blank"*/}
{/* href="https://www.ergoforum.org/t/tx-assembler-service-bypassing-node-requirement-for-dapps/443"*/}
{/* >*/}
{/* here*/}
{/* </a>*/}
{/* . Your funds will be safe, find out more*/}
{/* about how{' '}*/}
{/* <a target="_blank"*/}
{/* href="https://www.ergoforum.org/t/some-details-about-ergo-auction-house/428/6">*/}
{/* here*/}
{/* </a>*/}
{/* .*/}
{/*</p>*/}
<b>If you are an artist, make sure you read <a target='_blank' href='https://www.ergoforum.org/t/artist-guideline/2929'>this</a> before using the Ergo Auction House.</b>
<br/>
<br/>
<FormGroup>
<Label for="apiKey">Address</Label>
<Input
value={this.state.userAddress}
type="text"
name="address"
id="address"
invalid={!isAddressValid(this.state.userAddress)}
onChange={(event) =>
this.setState({
userAddress: event.target.value,
})
}
placeholder="Your ergo address"
/>
<FormFeedback invalid>
Invalid ergo address.
</FormFeedback>
<FormText>
Your funds and winning tokens will be sent to this address. {' '}
<b>Make sure your wallet supports custom tokens!</b> {' '}
Currently, <a href="https://github.com/ergoplatform/ergo">Ergo Node</a>, {' '}
<a href="https://yoroi-wallet.com/">Yoroi</a>, {' '}
<a href="https://github.com/ergoplatform/ergo-wallet-android">Ergo Wallet Android</a>, {' '}
<a href="https://github.com/coinbarn/coinbarn-extension">Coinbarn</a> and {' '}
<a href="https://ergowallet.io/">Ergo Wallet</a> support tokens.
</FormText>
</FormGroup>
</TabPane>
</TabContent>
</ModalBody>
<ModalFooter>
<SyncLoader
css={override}
size={8}
color={'#0086d3'}
loading={this.state.processing}
/>
<Button
disabled={this.state.walletState === 'Configure'}
className="ml-5 mr-2 btn-transition"
color="secondary"
onClick={this.clearWallet}
>
Clear wallet info
</Button>
<Button
className="ml mr-2 btn-transition"
color="secondary"
onClick={this.toggle}
>
Cancel
</Button>
<Button
className="mr-2 btn-transition"
color="secondary"
disabled={
this.state.processing ||
(this.state.activeTab === 'assembler' && !isAddressValid(this.state.userAddress))
}
onClick={() => this.saveWallet()}
>
{this.state.activeTab !== 'yoroi' ? 'Save' : (isYoroi()? 'reconnect' : 'Connect')} {this.state.processing}
</Button>
</ModalFooter>
</Modal>
</span>
);
}
Example #6
| Source File: Login.js From sofia-react-template with MIT License | 4 votes |
|
Login = (props) => {
const [state, setState] = useState({
email: '[email protected]',
password: 'password',
})
const doLogin = (e) => {
e.preventDefault();
props.dispatch(loginUser({ password: state.password, email: state.email }))
}
const changeCreds = (event) => {
setState({ ...state, [event.target.name]: event.target.value })
}
const { from } = props.location.state || { from: { pathname: '/template' }};
if (hasToken(JSON.parse(localStorage.getItem('authenticated')))) {
return (
<Redirect to={from} />
)
}
return (
<div className="auth-page">
<Container className="col-12">
<Row className="d-flex align-items-center">
<Col xs={12} lg={6} className="left-column">
<Widget className="widget-auth widget-p-lg">
<div className="d-flex align-items-center justify-content-between py-3">
<p className="auth-header mb-0">Login</p>
<div className="logo-block">
<SofiaLogo />
<p className="mb-0">SOFIA</p>
</div>
</div>
<div className="auth-info my-2">
<p>This is a real app with Node.js backend - use <b>"[email protected] / password"</b> to login!</p>
</div>
<form onSubmit={(event) => doLogin(event)}>
<FormGroup className="my-3">
<FormText>Email</FormText>
<Input
id="email"
className="input-transparent pl-3"
value={state.email}
onChange={(event) => changeCreds(event)}
type="email"
required
name="email"
placeholder="Email"
/>
</FormGroup>
<FormGroup className="my-3">
<div className="d-flex justify-content-between">
<FormText>Password</FormText>
<Link to="/error">Forgot password?</Link>
</div>
<Input
id="password"
className="input-transparent pl-3"
value={state.password}
onChange={(event) => changeCreds(event)}
type="password"
required
name="password"
placeholder="Password"
/>
</FormGroup>
<div className="bg-widget d-flex justify-content-center">
<Button className="rounded-pill my-3" type="submit" color="secondary-red">Login</Button>
</div>
<p className="dividing-line my-3"> Or </p>
<div className="d-flex align-items-center my-3">
<p className="social-label mb-0">Login with</p>
<div className="socials">
<a href="https://flatlogic.com/"><GoogleIcon /></a>
<a href="https://flatlogic.com/"><TwitterIcon /></a>
<a href="https://flatlogic.com/"><FacebookIcon /></a>
<a href="https://flatlogic.com/"><GithubIcon /></a>
<a href="https://flatlogic.com/"><LinkedinIcon /></a>
</div>
</div>
<Link to="/register">Don’t have an account? Sign Up here</Link>
</form>
</Widget>
</Col>
<Col xs={0} lg={6} className="right-column">
<div>
<img src={loginImage} alt="Error page" />
</div>
</Col>
</Row>
</Container>
<Footer />
</div>
)
}
Example #7
| Source File: Register.js From sofia-react-template with MIT License | 4 votes |
|
Register = (props) => {
const [state, setState] = useState({ email: '', password: ''} )
const changeCred = (event) => {
setState({ ...state, [event.target.name]: event.target.value })
}
const doRegister = (event) => {
event.preventDefault();
props.dispatch(registerUser({
creds: state,
history: props.history,
}))
}
const { from } = props.location.state || { from: { pathname: '/template' } }
if (hasToken(JSON.parse(localStorage.getItem('authenticated')))) {
return (
<Redirect to={from} />
);
}
return (
<div className="auth-page">
<Container className="col-12">
<Row className="d-flex align-items-center">
<Col xs={12} lg={6} className="left-column">
<Widget className="widget-auth widget-p-lg">
<div className="d-flex align-items-center justify-content-between py-3">
<p className="auth-header mb-0">Sign Up</p>
<div className="logo-block">
<SofiaLogo />
<p className="mb-0">SOFIA</p>
</div>
</div>
<div className="auth-info my-2">
<p>This is a real app with Node.js backend - use <b>"[email protected] / password"</b> to login!</p>
</div>
<form onSubmit={(event => doRegister(event))}>
<FormGroup className="my-3">
<FormText>Email</FormText>
<Input
id="email"
className="input-transparent pl-3"
value={state.email}
onChange={(event) => changeCred(event)}
type="email"
required
name="email"
placeholder="Henry Monk"
/>
</FormGroup>
<FormGroup className="my-3">
<div className="d-flex justify-content-between">
<FormText>Password</FormText>
<Link to="/error">Forgot password?</Link>
</div>
<Input
id="password"
className="input-transparent pl-3"
value={state.password}
onChange={(event => changeCred(event))}
type="password"
required
name="password"
placeholder="Place your password here"
/>
</FormGroup>
<div className="bg-widget d-flex justify-content-center">
<Button className="rounded-pill my-3" type="submit" color="secondary-red">Sign Up</Button>
</div>
<p className="dividing-line my-3"> Or </p>
<div className="d-flex align-items-center my-3">
<p className="social-label mb-0">Login with</p>
<div className="socials">
<a href="https://flatlogic.com/"><GoogleIcon /></a>
<a href="https://flatlogic.com/"><TwitterIcon /></a>
<a href="https://flatlogic.com/"><FacebookIcon /></a>
<a href="https://flatlogic.com/"><GithubIcon /></a>
<a href="https://flatlogic.com/"><LinkedinIcon /></a>
</div>
</div>
<Link to="/login">Enter the account</Link>
</form>
</Widget>
</Col>
<Col xs={0} lg={6} className="right-column">
<div>
<img src={loginImage} alt="Error page" />
</div>
</Col>
</Row>
</Container>
<Footer />
</div>
)
}
Example #8
| Source File: index.js From gobench with Apache License 2.0 | 4 votes |
|
render() {
return (
<div>
<h5 className="mb-4">
<strong>Default Form</strong>
</h5>
<div className="mb-5">
<Form>
<FormGroup>
<Label for="exampleEmail">Email</Label>
<Input type="email" name="email" id="exampleEmail" placeholder="with a placeholder" />
</FormGroup>
<FormGroup>
<Label for="examplePassword">Password</Label>
<Input
type="password"
name="password"
id="examplePassword"
placeholder="password placeholder"
/>
</FormGroup>
<FormGroup>
<Label for="exampleSelect">Select</Label>
<Input type="select" name="select" id="exampleSelect">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</Input>
</FormGroup>
<FormGroup>
<Label for="exampleSelectMulti">Select Multiple</Label>
<Input type="select" name="selectMulti" id="exampleSelectMulti" multiple>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</Input>
</FormGroup>
<FormGroup>
<Label for="exampleText">Text Area</Label>
<Input type="textarea" name="text" id="exampleText" />
</FormGroup>
<FormGroup>
<Label for="exampleFile">File</Label>
<Input type="file" name="file" id="exampleFile" />
<FormText color="muted">
This is some placeholder block-level help text for the above input. Its a bit
lighter and easily wraps to a new line.
</FormText>
</FormGroup>
<FormGroup tag="fieldset">
<FormGroup check>
<Label check className="kit__utils__control kit__utils__control__radio">
<Input type="radio" name="radio2" checked />
<span className="kit__utils__control__indicator" />
Option one is this and that—be sure to include why its great
</Label>
</FormGroup>
<FormGroup check>
<Label check className="kit__utils__control kit__utils__control__radio">
<Input type="radio" name="radio2" />
<span className="kit__utils__control__indicator" />
Option two can be something else and selecting it will deselect option one
</Label>
</FormGroup>
<FormGroup check disabled>
<Label check className="kit__utils__control kit__utils__control__radio">
<Input type="radio" name="radio2" disabled />
<span className="kit__utils__control__indicator" />
Option three is disabled
</Label>
</FormGroup>
</FormGroup>
<FormGroup check>
<Label check className="kit__utils__control kit__utils__control__checkbox">
<Input type="checkbox" id="checkbox2" />
<span className="kit__utils__control__indicator" />
Check me out
</Label>
</FormGroup>
<div className="border-top mt-4 pt-4">
<Button color="primary" className="px-5">
Submit
</Button>
</div>
</Form>
</div>
<h5 className="mb-4">
<strong>Horizontal Form</strong>
</h5>
<div className="mb-5">
<Form>
<FormGroup row>
<Label for="exampleEmail" sm={2}>
Email
</Label>
<Col sm={10}>
<Input
type="email"
name="email"
id="exampleEmail"
placeholder="with a placeholder"
/>
</Col>
</FormGroup>
<FormGroup row>
<Label for="examplePassword" sm={2}>
Password
</Label>
<Col sm={10}>
<Input
type="password"
name="password"
id="examplePassword"
placeholder="password placeholder"
/>
</Col>
</FormGroup>
<FormGroup row>
<Label for="exampleSelect" sm={2}>
Select
</Label>
<Col sm={10}>
<Input type="select" name="select" id="exampleSelect" />
</Col>
</FormGroup>
<FormGroup row>
<Label for="exampleSelectMulti" sm={2}>
Select Multiple
</Label>
<Col sm={10}>
<Input type="select" name="selectMulti" id="exampleSelectMulti" multiple />
</Col>
</FormGroup>
<FormGroup row>
<Label for="exampleText" sm={2}>
Text Area
</Label>
<Col sm={10}>
<Input type="textarea" name="text" id="exampleText" />
</Col>
</FormGroup>
<FormGroup row>
<Label for="exampleFile" sm={2}>
File
</Label>
<Col sm={10}>
<Input type="file" name="file" id="exampleFile" />
<FormText color="muted">
This is some placeholder block-level help text for the above input. Its a bit
lighter and easily wraps to a new line.
</FormText>
</Col>
</FormGroup>
<FormGroup row>
<div className="col-sm-2">
<legend className="col-form-label">Radio Buttons</legend>
</div>
<Col sm={10}>
<FormGroup check>
<Label check className="kit__utils__control kit__utils__control__radio">
<Input type="radio" name="radio2" checked />
<span className="kit__utils__control__indicator" />
Option one is this and that—be sure to include why its great
</Label>
</FormGroup>
<FormGroup check>
<Label check className="kit__utils__control kit__utils__control__radio">
<Input type="radio" name="radio2" />
<span className="kit__utils__control__indicator" />
Option two can be something else and selecting it will deselect option one
</Label>
</FormGroup>
<FormGroup check disabled>
<Label check className="kit__utils__control kit__utils__control__radio">
<Input type="radio" name="radio2" disabled />
<span className="kit__utils__control__indicator" />
Option three is disabled
</Label>
</FormGroup>
</Col>
</FormGroup>
<FormGroup row>
<Label for="checkbox2" sm={2}>
Checkbox
</Label>
<Col sm={{ size: 10 }}>
<FormGroup check>
<Label check className="kit__utils__control kit__utils__control__checkbox">
<Input type="checkbox" id="checkbox2" />
<span className="kit__utils__control__indicator" />
Check me out
</Label>
</FormGroup>
</Col>
</FormGroup>
<div className="border-top mt-4 pt-4">
<FormGroup check row>
<Col sm={{ size: 10, offset: 2 }}>
<Button color="primary" className="px-5">
Submit
</Button>
</Col>
</FormGroup>
</div>
</Form>
</div>
</div>
)
}
Example #9
| Source File: Forms.js From id.co.moonlay-eworkplace-admin-web with MIT License | 4 votes |
|
render() {
return (
<div className="animated fadeIn">
<Row>
<Col xs="12" sm="6">
<Card>
<CardHeader>
<strong>Credit Card</strong>
<small> Form</small>
</CardHeader>
<CardBody>
<Row>
<Col xs="12">
<FormGroup>
<Label htmlFor="name">Name</Label>
<Input type="text" id="name" placeholder="Enter your name" required />
</FormGroup>
</Col>
</Row>
<Row>
<Col xs="12">
<FormGroup>
<Label htmlFor="ccnumber">Credit Card Number</Label>
<Input type="text" id="ccnumber" placeholder="0000 0000 0000 0000" required />
</FormGroup>
</Col>
</Row>
<Row>
<Col xs="4">
<FormGroup>
<Label htmlFor="ccmonth">Month</Label>
<Input type="select" name="ccmonth" id="ccmonth">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
</Input>
</FormGroup>
</Col>
<Col xs="4">
<FormGroup>
<Label htmlFor="ccyear">Year</Label>
<Input type="select" name="ccyear" id="ccyear">
<option>2017</option>
<option>2018</option>
<option>2019</option>
<option>2020</option>
<option>2021</option>
<option>2022</option>
<option>2023</option>
<option>2024</option>
<option>2025</option>
<option>2026</option>
</Input>
</FormGroup>
</Col>
<Col xs="4">
<FormGroup>
<Label htmlFor="cvv">CVV/CVC</Label>
<Input type="text" id="cvv" placeholder="123" required />
</FormGroup>
</Col>
</Row>
</CardBody>
</Card>
</Col>
<Col xs="12" sm="6">
<Card>
<CardHeader>
<strong>Company</strong>
<small> Form</small>
</CardHeader>
<CardBody>
<FormGroup>
<Label htmlFor="company">Company</Label>
<Input type="text" id="company" placeholder="Enter your company name" />
</FormGroup>
<FormGroup>
<Label htmlFor="vat">VAT</Label>
<Input type="text" id="vat" placeholder="DE1234567890" />
</FormGroup>
<FormGroup>
<Label htmlFor="street">Street</Label>
<Input type="text" id="street" placeholder="Enter street name" />
</FormGroup>
<FormGroup row className="my-0">
<Col xs="8">
<FormGroup>
<Label htmlFor="city">City</Label>
<Input type="text" id="city" placeholder="Enter your city" />
</FormGroup>
</Col>
<Col xs="4">
<FormGroup>
<Label htmlFor="postal-code">Postal Code</Label>
<Input type="text" id="postal-code" placeholder="Postal Code" />
</FormGroup>
</Col>
</FormGroup>
<FormGroup>
<Label htmlFor="country">Country</Label>
<Input type="text" id="country" placeholder="Country name" />
</FormGroup>
</CardBody>
</Card>
</Col>
</Row>
<Row>
<Col xs="12" md="6">
<Card>
<CardHeader>
<strong>Basic Form</strong> Elements
</CardHeader>
<CardBody>
<Form action="" method="post" encType="multipart/form-data" className="form-horizontal">
<FormGroup row>
<Col md="3">
<Label>Static</Label>
</Col>
<Col xs="12" md="9">
<p className="form-control-static">Username</p>
</Col>
</FormGroup>
<FormGroup row>
<Col md="3">
<Label htmlFor="text-input">Text Input</Label>
</Col>
<Col xs="12" md="9">
<Input type="text" id="text-input" name="text-input" placeholder="Text" />
<FormText color="muted">This is a help text</FormText>
</Col>
</FormGroup>
<FormGroup row>
<Col md="3">
<Label htmlFor="email-input">Email Input</Label>
</Col>
<Col xs="12" md="9">
<Input type="email" id="email-input" name="email-input" placeholder="Enter Email" autoComplete="email"/>
<FormText className="help-block">Please enter your email</FormText>
</Col>
</FormGroup>
<FormGroup row>
<Col md="3">
<Label htmlFor="password-input">Password</Label>
</Col>
<Col xs="12" md="9">
<Input type="password" id="password-input" name="password-input" placeholder="Password" autoComplete="new-password" />
<FormText className="help-block">Please enter a complex password</FormText>
</Col>
</FormGroup>
<FormGroup row>
<Col md="3">
<Label htmlFor="date-input">Date Input <Badge>NEW</Badge></Label>
</Col>
<Col xs="12" md="9">
<Input type="date" id="date-input" name="date-input" placeholder="date" />
</Col>
</FormGroup>
<FormGroup row>
<Col md="3">
<Label htmlFor="disabled-input">Disabled Input</Label>
</Col>
<Col xs="12" md="9">
<Input type="text" id="disabled-input" name="disabled-input" placeholder="Disabled" disabled />
</Col>
</FormGroup>
<FormGroup row>
<Col md="3">
<Label htmlFor="textarea-input">Textarea</Label>
</Col>
<Col xs="12" md="9">
<Input type="textarea" name="textarea-input" id="textarea-input" rows="9"
placeholder="Content..." />
</Col>
</FormGroup>
<FormGroup row>
<Col md="3">
<Label htmlFor="select">Select</Label>
</Col>
<Col xs="12" md="9">
<Input type="select" name="select" id="select">
<option value="0">Please select</option>
<option value="1">Option #1</option>
<option value="2">Option #2</option>
<option value="3">Option #3</option>
</Input>
</Col>
</FormGroup>
<FormGroup row>
<Col md="3">
<Label htmlFor="selectLg">Select Large</Label>
</Col>
<Col xs="12" md="9" size="lg">
<Input type="select" name="selectLg" id="selectLg" bsSize="lg">
<option value="0">Please select</option>
<option value="1">Option #1</option>
<option value="2">Option #2</option>
<option value="3">Option #3</option>
</Input>
</Col>
</FormGroup>
<FormGroup row>
<Col md="3">
<Label htmlFor="selectSm">Select Small</Label>
</Col>
<Col xs="12" md="9">
<Input type="select" name="selectSm" id="SelectLm" bsSize="sm">
<option value="0">Please select</option>
<option value="1">Option #1</option>
<option value="2">Option #2</option>
<option value="3">Option #3</option>
<option value="4">Option #4</option>
<option value="5">Option #5</option>
</Input>
</Col>
</FormGroup>
<FormGroup row>
<Col md="3">
<Label htmlFor="disabledSelect">Disabled Select</Label>
</Col>
<Col xs="12" md="9">
<Input type="select" name="disabledSelect" id="disabledSelect" disabled autoComplete="name">
<option value="0">Please select</option>
<option value="1">Option #1</option>
<option value="2">Option #2</option>
<option value="3">Option #3</option>
</Input>
</Col>
</FormGroup>
<FormGroup row>
<Col md="3">
<Label htmlFor="multiple-select">Multiple select</Label>
</Col>
<Col md="9">
<Input type="select" name="multiple-select" id="multiple-select" multiple>
<option value="1">Option #1</option>
<option value="2">Option #2</option>
<option value="3">Option #3</option>
<option value="4">Option #4</option>
<option value="5">Option #5</option>
<option value="6">Option #6</option>
<option value="7">Option #7</option>
<option value="8">Option #8</option>
<option value="9">Option #9</option>
<option value="10">Option #10</option>
</Input>
</Col>
</FormGroup>
<FormGroup row>
<Col md="3">
<Label>Radios</Label>
</Col>
<Col md="9">
<FormGroup check className="radio">
<Input className="form-check-input" type="radio" id="radio1" name="radios" value="option1" />
<Label check className="form-check-label" htmlFor="radio1">Option 1</Label>
</FormGroup>
<FormGroup check className="radio">
<Input className="form-check-input" type="radio" id="radio2" name="radios" value="option2" />
<Label check className="form-check-label" htmlFor="radio2">Option 2</Label>
</FormGroup>
<FormGroup check className="radio">
<Input className="form-check-input" type="radio" id="radio3" name="radios" value="option3" />
<Label check className="form-check-label" htmlFor="radio3">Option 3</Label>
</FormGroup>
</Col>
</FormGroup>
<FormGroup row>
<Col md="3">
<Label>Inline Radios</Label>
</Col>
<Col md="9">
<FormGroup check inline>
<Input className="form-check-input" type="radio" id="inline-radio1" name="inline-radios" value="option1" />
<Label className="form-check-label" check htmlFor="inline-radio1">One</Label>
</FormGroup>
<FormGroup check inline>
<Input className="form-check-input" type="radio" id="inline-radio2" name="inline-radios" value="option2" />
<Label className="form-check-label" check htmlFor="inline-radio2">Two</Label>
</FormGroup>
<FormGroup check inline>
<Input className="form-check-input" type="radio" id="inline-radio3" name="inline-radios" value="option3" />
<Label className="form-check-label" check htmlFor="inline-radio3">Three</Label>
</FormGroup>
</Col>
</FormGroup>
<FormGroup row>
<Col md="3"><Label>Checkboxes</Label></Col>
<Col md="9">
<FormGroup check className="checkbox">
<Input className="form-check-input" type="checkbox" id="checkbox1" name="checkbox1" value="option1" />
<Label check className="form-check-label" htmlFor="checkbox1">Option 1</Label>
</FormGroup>
<FormGroup check className="checkbox">
<Input className="form-check-input" type="checkbox" id="checkbox2" name="checkbox2" value="option2" />
<Label check className="form-check-label" htmlFor="checkbox2">Option 2</Label>
</FormGroup>
<FormGroup check className="checkbox">
<Input className="form-check-input" type="checkbox" id="checkbox3" name="checkbox3" value="option3" />
<Label check className="form-check-label" htmlFor="checkbox3">Option 3</Label>
</FormGroup>
</Col>
</FormGroup>
<FormGroup row>
<Col md="3">
<Label>Inline Checkboxes</Label>
</Col>
<Col md="9">
<FormGroup check inline>
<Input className="form-check-input" type="checkbox" id="inline-checkbox1" name="inline-checkbox1" value="option1" />
<Label className="form-check-label" check htmlFor="inline-checkbox1">One</Label>
</FormGroup>
<FormGroup check inline>
<Input className="form-check-input" type="checkbox" id="inline-checkbox2" name="inline-checkbox2" value="option2" />
<Label className="form-check-label" check htmlFor="inline-checkbox2">Two</Label>
</FormGroup>
<FormGroup check inline>
<Input className="form-check-input" type="checkbox" id="inline-checkbox3" name="inline-checkbox3" value="option3" />
<Label className="form-check-label" check htmlFor="inline-checkbox3">Three</Label>
</FormGroup>
</Col>
</FormGroup>
<FormGroup row>
<Col md="3">
<Label htmlFor="file-input">File input</Label>
</Col>
<Col xs="12" md="9">
<Input type="file" id="file-input" name="file-input" />
</Col>
</FormGroup>
<FormGroup row>
<Col md="3">
<Label htmlFor="file-multiple-input">Multiple File input</Label>
</Col>
<Col xs="12" md="9">
<Input type="file" id="file-multiple-input" name="file-multiple-input" multiple />
</Col>
</FormGroup>
<FormGroup row hidden>
<Col md="3">
<Label className="custom-file" htmlFor="custom-file-input">Custom file input</Label>
</Col>
<Col xs="12" md="9">
<Label className="custom-file">
<Input className="custom-file" type="file" id="custom-file-input" name="file-input" />
<span className="custom-file-control"></span>
</Label>
</Col>
</FormGroup>
</Form>
</CardBody>
<CardFooter>
<Button type="submit" size="sm" color="primary"><i className="fa fa-dot-circle-o"></i> Submit</Button>
<Button type="reset" size="sm" color="danger"><i className="fa fa-ban"></i> Reset</Button>
</CardFooter>
</Card>
<Card>
<CardHeader>
<strong>Inline</strong> Form
</CardHeader>
<CardBody>
<Form action="" method="post" inline>
<FormGroup className="pr-1">
<Label htmlFor="exampleInputName2" className="pr-1">Name</Label>
<Input type="text" id="exampleInputName2" placeholder="Jane Doe" required />
</FormGroup>
<FormGroup className="pr-1">
<Label htmlFor="exampleInputEmail2" className="pr-1">Email</Label>
<Input type="email" id="exampleInputEmail2" placeholder="[email protected]" required />
</FormGroup>
</Form>
</CardBody>
<CardFooter>
<Button type="submit" size="sm" color="primary"><i className="fa fa-dot-circle-o"></i> Submit</Button>
<Button type="reset" size="sm" color="danger"><i className="fa fa-ban"></i> Reset</Button>
</CardFooter>
</Card>
</Col>
<Col xs="12" md="6">
<Card>
<CardHeader>
<strong>Horizontal</strong> Form
</CardHeader>
<CardBody>
<Form action="" method="post" className="form-horizontal">
<FormGroup row>
<Col md="3">
<Label htmlFor="hf-email">Email</Label>
</Col>
<Col xs="12" md="9">
<Input type="email" id="hf-email" name="hf-email" placeholder="Enter Email..." autoComplete="email" />
<FormText className="help-block">Please enter your email</FormText>
</Col>
</FormGroup>
<FormGroup row>
<Col md="3">
<Label htmlFor="hf-password">Password</Label>
</Col>
<Col xs="12" md="9">
<Input type="password" id="hf-password" name="hf-password" placeholder="Enter Password..." autoComplete="current-password"/>
<FormText className="help-block">Please enter your password</FormText>
</Col>
</FormGroup>
</Form>
</CardBody>
<CardFooter>
<Button type="submit" size="sm" color="primary"><i className="fa fa-dot-circle-o"></i> Submit</Button>
<Button type="reset" size="sm" color="danger"><i className="fa fa-ban"></i> Reset</Button>
</CardFooter>
</Card>
<Card>
<CardHeader>
<strong>Normal</strong> Form
</CardHeader>
<CardBody>
<Form action="" method="post">
<FormGroup>
<Label htmlFor="nf-email">Email</Label>
<Input type="email" id="nf-email" name="nf-email" placeholder="Enter Email.." autoComplete="email"/>
<FormText className="help-block">Please enter your email</FormText>
</FormGroup>
<FormGroup>
<Label htmlFor="nf-password">Password</Label>
<Input type="password" id="nf-password" name="nf-password" placeholder="Enter Password.." autoComplete="current-password"/>
<FormText className="help-block">Please enter your password</FormText>
</FormGroup>
</Form>
</CardBody>
<CardFooter>
<Button type="submit" size="sm" color="primary"><i className="fa fa-dot-circle-o"></i> Submit</Button>
<Button type="reset" size="sm" color="danger"><i className="fa fa-ban"></i> Reset</Button>
</CardFooter>
</Card>
<Card>
<CardHeader>
Input <strong>Grid</strong>
</CardHeader>
<CardBody>
<Form action="" method="post" className="form-horizontal">
<FormGroup row>
<Col sm="3">
<Input type="text" placeholder=".col-sm-3" />
</Col>
</FormGroup>
<FormGroup row>
<Col sm="4">
<Input type="text" placeholder=".col-sm-4" />
</Col>
</FormGroup>
<FormGroup row>
<Col sm="5">
<Input type="text" placeholder=".col-sm-5" />
</Col>
</FormGroup>
<FormGroup row>
<Col sm="6">
<Input type="text" placeholder=".col-sm-6" />
</Col>
</FormGroup>
<FormGroup row>
<Col sm="7">
<Input type="text" placeholder=".col-sm-7" />
</Col>
</FormGroup>
<FormGroup row>
<Col sm="8">
<Input type="text" placeholder=".col-sm-8" />
</Col>
</FormGroup>
<FormGroup row>
<Col sm="9">
<Input type="text" placeholder=".col-sm-9" />
</Col>
</FormGroup>
<FormGroup row>
<Col sm="10">
<Input type="text" placeholder=".col-sm-10" />
</Col>
</FormGroup>
<FormGroup row>
<Col sm="11">
<Input type="text" placeholder=".col-sm-11" />
</Col>
</FormGroup>
<FormGroup row>
<Col sm="12">
<Input type="text" placeholder=".col-sm-12" />
</Col>
</FormGroup>
</Form>
</CardBody>
<CardFooter>
<Button type="submit" size="sm" color="primary"><i className="fa fa-user"></i> Login</Button>
<Button type="reset" size="sm" color="danger"><i className="fa fa-ban"></i> Reset</Button>
</CardFooter>
</Card>
<Card>
<CardHeader>
Input <strong>Sizes</strong>
</CardHeader>
<CardBody>
<Form action="" method="post" className="form-horizontal">
<FormGroup row>
<Label sm="5" size="sm" htmlFor="input-small">Small Input</Label>
<Col sm="6">
<Input bsSize="sm" type="text" id="input-small" name="input-small" className="input-sm" placeholder=".form-control-sm" />
</Col>
</FormGroup>
<FormGroup row>
<Label sm="5" htmlFor="input-normal">Normal Input</Label>
<Col sm="6">
<Input type="text" id="input-normal" name="input-normal" placeholder="Normal" />
</Col>
</FormGroup>
<FormGroup row>
<Label sm="5" size="lg" htmlFor="input-large">Large Input</Label>
<Col sm="6">
<Input bsSize="lg" type="text" id="input-large" name="input-large" className="input-lg" placeholder=".form-control-lg" />
</Col>
</FormGroup>
</Form>
</CardBody>
<CardFooter>
<Button type="submit" size="sm" color="primary"><i className="fa fa-dot-circle-o"></i> Submit</Button>
<Button type="reset" size="sm" color="danger"><i className="fa fa-ban"></i> Reset</Button>
</CardFooter>
</Card>
</Col>
</Row>
<Row>
<Col xs="12" sm="6">
<Card>
<CardHeader>
<strong>Validation feedback</strong> Form
</CardHeader>
<CardBody>
<FormGroup>
<Label htmlFor="inputIsValid">Input is valid</Label>
<Input type="text" valid id="inputIsValid" />
<FormFeedback valid>Cool! Input is valid</FormFeedback>
</FormGroup>
<FormGroup>
<Label htmlFor="inputIsInvalid">Input is invalid</Label>
<Input type="text" invalid id="inputIsInvalid" />
<FormFeedback>Houston, we have a problem...</FormFeedback>
</FormGroup>
</CardBody>
</Card>
</Col>
<Col xs="12" sm="6">
<Card>
<CardHeader>
<strong>Validation feedback</strong> Form
</CardHeader>
<CardBody>
<Form className="was-validated">
<FormGroup>
<Label htmlFor="inputSuccess2i">Non-required input</Label>
<Input type="text" className="form-control-success" id="inputSuccess2i" />
<FormFeedback valid>Non-required</FormFeedback>
</FormGroup>
<FormGroup>
<Label htmlFor="inputWarning2i">Required input</Label>
<Input type="text" className="form-control-warning" id="inputWarning2i" required />
<FormFeedback className="help-block">Please provide a valid information</FormFeedback>
<FormFeedback valid className="help-block">Input provided</FormFeedback>
</FormGroup>
</Form>
</CardBody>
</Card>
</Col>
</Row>
<Row>
<Col xs="12" md="4">
<Card>
<CardHeader>
<strong>Icon/Text</strong> Groups
</CardHeader>
<CardBody>
<Form action="" method="post" className="form-horizontal">
<FormGroup row>
<Col md="12">
<InputGroup>
<InputGroupAddon addonType="prepend">
<InputGroupText>
<i className="fa fa-user"></i>
</InputGroupText>
</InputGroupAddon>
<Input type="text" id="input1-group1" name="input1-group1" placeholder="Username" />
</InputGroup>
</Col>
</FormGroup>
<FormGroup row>
<Col md="12">
<InputGroup>
<Input type="email" id="input2-group1" name="input2-group1" placeholder="Email" />
<InputGroupAddon addonType="append">
<InputGroupText>
<i className="fa fa-envelope-o"></i>
</InputGroupText>
</InputGroupAddon>
</InputGroup>
</Col>
</FormGroup>
<FormGroup row>
<Col md="12">
<InputGroup>
<InputGroupAddon addonType="prepend">
<InputGroupText>
<i className="fa fa-euro"></i>
</InputGroupText>
</InputGroupAddon>
<Input type="text" id="input3-group1" name="input3-group1" placeholder=".." />
<InputGroupAddon addonType="append">
<InputGroupText>.00</InputGroupText>
</InputGroupAddon>
</InputGroup>
</Col>
</FormGroup>
</Form>
</CardBody>
<CardFooter>
<Button type="submit" size="sm" color="success"><i className="fa fa-dot-circle-o"></i> Submit</Button>
<Button type="reset" size="sm" color="danger"><i className="fa fa-ban"></i> Reset</Button>
</CardFooter>
</Card>
</Col>
<Col xs="12" md="4">
<Card>
<CardHeader>
<strong>Button</strong> Groups
</CardHeader>
<CardBody>
<Form action="" method="post" className="form-horizontal">
<FormGroup row>
<Col md="12">
<InputGroup>
<InputGroupAddon addonType="prepend">
<Button type="button" color="primary"><i className="fa fa-search"></i> Search</Button>
</InputGroupAddon>
<Input type="text" id="input1-group2" name="input1-group2" placeholder="Username" />
</InputGroup>
</Col>
</FormGroup>
<FormGroup row>
<Col md="12">
<InputGroup>
<Input type="email" id="input2-group2" name="input2-group2" placeholder="Email" />
<InputGroupAddon addonType="append">
<Button type="button" color="primary">Submit</Button>
</InputGroupAddon>
</InputGroup>
</Col>
</FormGroup>
<FormGroup row>
<Col md="12">
<InputGroup>
<InputGroupAddon addonType="prepend">
<Button type="button" color="primary"><i className="fa fa-facebook"></i></Button>
</InputGroupAddon>
<Input type="text" id="input3-group2" name="input3-group2" placeholder="Search" />
<InputGroupAddon addonType="append">
<Button type="button" color="primary"><i className="fa fa-twitter"></i></Button>
</InputGroupAddon>
</InputGroup>
</Col>
</FormGroup>
</Form>
</CardBody>
<CardFooter>
<Button type="submit" size="sm" color="success"><i className="fa fa-dot-circle-o"></i> Submit</Button>
<Button type="reset" size="sm" color="danger"><i className="fa fa-ban"></i> Reset</Button>
</CardFooter>
</Card>
</Col>
<Col xs="12" md="4">
<Card>
<CardHeader>
<strong>Dropdowns</strong> Groups
</CardHeader>
<CardBody>
<Form className="form-horizontal">
<FormGroup row>
<Col md="12">
<InputGroup>
<InputGroupButtonDropdown addonType="prepend"
isOpen={this.state.first}
toggle={() => { this.setState({ first: !this.state.first }); }}>
<DropdownToggle caret color="primary">
Dropdown
</DropdownToggle>
<DropdownMenu className={this.state.first ? 'show' : ''}>
<DropdownItem>Action</DropdownItem>
<DropdownItem>Another Action</DropdownItem>
<DropdownItem>Something else here</DropdownItem>
<DropdownItem divider />
<DropdownItem>Separated link</DropdownItem>
</DropdownMenu>
</InputGroupButtonDropdown>
<Input type="text" id="input1-group3" name="input1-group3" placeholder="Username" />
</InputGroup>
</Col>
</FormGroup>
<FormGroup row>
<Col md="12">
<InputGroup>
<Input type="email" id="input2-group3" name="input2-group3" placeholder="Email" />
<InputGroupButtonDropdown addonType="append"
isOpen={this.state.second}
toggle={() => { this.setState({ second: !this.state.second }); }}>
<DropdownToggle caret color="primary">
Dropdown
</DropdownToggle>
<DropdownMenu className={this.state.second ? 'show' : ''}>
<DropdownItem>Action</DropdownItem>
<DropdownItem>Another Action</DropdownItem>
<DropdownItem>Something else here</DropdownItem>
<DropdownItem divider />
<DropdownItem>Separated link</DropdownItem>
</DropdownMenu>
</InputGroupButtonDropdown>
</InputGroup>
</Col>
</FormGroup>
<FormGroup row>
<Col md="12">
<InputGroup>
<InputGroupButtonDropdown
addonType="prepend"
isOpen={this.state.third}
toggle={() => { this.setState({ third: !this.state.third }); }}>
<DropdownToggle caret color="primary">Action</DropdownToggle>
<DropdownMenu className={this.state.third ? 'show' : ''}>
<DropdownItem>Action</DropdownItem>
<DropdownItem>Another Action</DropdownItem>
<DropdownItem>Something else here</DropdownItem>
<DropdownItem divider />
<DropdownItem>Separated link</DropdownItem>
</DropdownMenu>
</InputGroupButtonDropdown>
<Input type="text" id="input3-group3" name="input3-group3" placeholder=".." />
<InputGroupButtonDropdown addonType="append"
isOpen={this.state.fourth}
toggle={() => { this.setState({ fourth: !this.state.fourth }); }}>
<DropdownToggle caret color="primary">
Dropdown
</DropdownToggle>
<DropdownMenu className={this.state.fourth ? 'show' : ''}>
<DropdownItem>Action</DropdownItem>
<DropdownItem>Another Action</DropdownItem>
<DropdownItem>Something else here</DropdownItem>
<DropdownItem divider />
<DropdownItem>Separated link</DropdownItem>
</DropdownMenu>
</InputGroupButtonDropdown>
</InputGroup>
</Col>
</FormGroup>
</Form>
</CardBody>
<CardFooter>
<Button type="submit" size="sm" color="success"><i className="fa fa-dot-circle-o"></i> Submit</Button>
<Button type="reset" size="sm" color="danger"><i className="fa fa-ban"></i> Reset</Button>
</CardFooter>
</Card>
</Col>
</Row>
<Row>
<Col xs="12" md="6">
<Card>
<CardHeader>
Use the grid for big devices!
<small><code>.col-lg-*</code> <code>.col-md-*</code> <code>.col-sm-*</code></small>
</CardHeader>
<CardBody>
<Form action="" method="post" className="form-horizontal">
<FormGroup row>
<Col md="8">
<Input type="text" placeholder=".col-md-8" />
</Col>
<Col md="4">
<Input type="text" placeholder=".col-md-4" />
</Col>
</FormGroup>
<FormGroup row>
<Col md="7">
<Input type="text" placeholder=".col-md-7" />
</Col>
<Col md="5">
<Input type="text" placeholder=".col-md-5" />
</Col>
</FormGroup>
<FormGroup row>
<Col md="6">
<Input type="text" placeholder=".col-md-6" />
</Col>
<Col md="6">
<Input type="text" placeholder=".col-md-6" />
</Col>
</FormGroup>
<FormGroup row>
<Col md="5">
<Input type="text" placeholder=".col-md-5" />
</Col>
<Col md="7">
<Input type="text" placeholder=".col-md-7" />
</Col>
</FormGroup>
<FormGroup row>
<Col md="4">
<Input type="text" placeholder=".col-md-4" />
</Col>
<Col md="8">
<Input type="text" placeholder=".col-md-8" />
</Col>
</FormGroup>
</Form>
</CardBody>
<CardFooter>
<Button type="submit" size="sm" color="primary">Action</Button>
<Button size="sm" color="danger">Action</Button>
<Button size="sm" color="warning">Action</Button>
<Button size="sm" color="info">Action</Button>
<Button size="sm" color="success">Action</Button>
</CardFooter>
</Card>
</Col>
<Col xs="12" md="6">
<Card>
<CardHeader>
Input Grid for small devices!
<small><code>.col-*</code></small>
</CardHeader>
<CardBody>
<Form action="" method="post" className="form-horizontal">
<FormGroup row>
<Col xs="4">
<Input type="text" placeholder=".col-4" />
</Col>
<Col xs="8">
<Input type="text" placeholder=".col-8" />
</Col>
</FormGroup>
<FormGroup row>
<Col xs="5">
<Input type="text" placeholder=".col-5" />
</Col>
<Col xs="7">
<Input type="text" placeholder=".col-7" />
</Col>
</FormGroup>
<FormGroup row>
<Col xs="6">
<Input type="text" placeholder=".col-6" />
</Col>
<Col xs="6">
<Input type="text" placeholder=".col-6" />
</Col>
</FormGroup>
<FormGroup row>
<Col xs="7">
<Input type="text" placeholder=".col-5" />
</Col>
<Col xs="5">
<Input type="text" placeholder=".col-5" />
</Col>
</FormGroup>
<FormGroup row>
<Col xs="8">
<Input type="text" placeholder=".col-8" />
</Col>
<Col xs="4">
<Input type="text" placeholder=".col-4" />
</Col>
</FormGroup>
</Form>
</CardBody>
<CardFooter>
<Button type="submit" size="sm" color="primary">Action</Button>
<Button size="sm" color="danger">Action</Button>
<Button size="sm" color="warning">Action</Button>
<Button size="sm" color="info">Action</Button>
<Button size="sm" color="success">Action</Button>
</CardFooter>
</Card>
</Col>
</Row>
<Row>
<Col xs="12" sm="4">
<Card>
<CardHeader>
Example Form
</CardHeader>
<CardBody>
<Form action="" method="post">
<FormGroup>
<InputGroup>
<InputGroupAddon addonType="prepend">
<InputGroupText>Username</InputGroupText>
</InputGroupAddon>
<Input type="email" id="username3" name="username3" autoComplete="name"/>
<InputGroupAddon addonType="append">
<InputGroupText><i className="fa fa-user"></i></InputGroupText>
</InputGroupAddon>
</InputGroup>
</FormGroup>
<FormGroup>
<InputGroup>
<InputGroupAddon addonType="prepend">
<InputGroupText>Email</InputGroupText>
</InputGroupAddon>
<Input type="email" id="email3" name="email3" autoComplete="username"/>
<InputGroupAddon addonType="append">
<InputGroupText><i className="fa fa-envelope"></i></InputGroupText>
</InputGroupAddon>
</InputGroup>
</FormGroup>
<FormGroup>
<InputGroup>
<InputGroupAddon addonType="prepend">
<InputGroupText>Password</InputGroupText>
</InputGroupAddon>
<Input type="password" id="password3" name="password3" autoComplete="current-password"/>
<InputGroupAddon addonType="append">
<InputGroupText><i className="fa fa-asterisk"></i></InputGroupText>
</InputGroupAddon>
</InputGroup>
</FormGroup>
<FormGroup className="form-actions">
<Button type="submit" size="sm" color="primary">Submit</Button>
</FormGroup>
</Form>
</CardBody>
</Card>
</Col>
<Col xs="12" sm="4">
<Card>
<CardHeader>
Example Form
</CardHeader>
<CardBody>
<Form action="" method="post">
<FormGroup>
<InputGroup>
<Input type="text" id="username2" name="username2" placeholder="Username" autoComplete="name"/>
<InputGroupAddon addonType="append">
<InputGroupText><i className="fa fa-user"></i></InputGroupText>
</InputGroupAddon>
</InputGroup>
</FormGroup>
<FormGroup>
<InputGroup>
<Input type="email" id="email2" name="email2" placeholder="Email" autoComplete="username"/>
<InputGroupAddon addonType="append">
<InputGroupText><i className="fa fa-envelope"></i></InputGroupText>
</InputGroupAddon>
</InputGroup>
</FormGroup>
<FormGroup>
<InputGroup>
<Input type="password" id="password2" name="password2" placeholder="Password" autoComplete="current-password"/>
<InputGroupAddon addonType="append">
<InputGroupText><i className="fa fa-asterisk"></i></InputGroupText>
</InputGroupAddon>
</InputGroup>
</FormGroup>
<FormGroup className="form-actions">
<Button type="submit" size="sm" color="secondary">Submit</Button>
</FormGroup>
</Form>
</CardBody>
</Card>
</Col>
<Col xs="12" sm="4">
<Card>
<CardHeader>
Example Form
</CardHeader>
<CardBody>
<Form action="" method="post">
<FormGroup>
<InputGroup>
<InputGroupAddon addonType="prepend">
<InputGroupText><i className="fa fa-user"></i></InputGroupText>
</InputGroupAddon>
<Input type="text" id="username1" name="username1" placeholder="Username" autoComplete="name"/>
</InputGroup>
</FormGroup>
<FormGroup>
<InputGroup>
<InputGroupAddon addonType="prepend">
<InputGroupText><i className="fa fa-envelope"></i></InputGroupText>
</InputGroupAddon>
<Input type="email" id="email1" name="email1" placeholder="Email" autoComplete="username"/>
</InputGroup>
</FormGroup>
<FormGroup>
<InputGroup>
<InputGroupAddon addonType="prepend">
<InputGroupText><i className="fa fa-asterisk"></i></InputGroupText>
</InputGroupAddon>
<Input type="password" id="password1" name="password1" placeholder="Password" autoComplete="current-password"/>
</InputGroup>
</FormGroup>
<FormGroup className="form-actions">
<Button type="submit" size="sm" color="success">Submit</Button>
</FormGroup>
</Form>
</CardBody>
</Card>
</Col>
</Row>
<Row>
<Col xs="12">
<Fade timeout={this.state.timeout} in={this.state.fadeIn}>
<Card>
<CardHeader>
<i className="fa fa-edit"></i>Form Elements
<div className="card-header-actions">
<Button color="link" className="card-header-action btn-setting"><i className="icon-settings"></i></Button>
<Button color="link" className="card-header-action btn-minimize" data-target="#collapseExample" onClick={this.toggle}><i className="icon-arrow-up"></i></Button>
<Button color="link" className="card-header-action btn-close" onClick={this.toggleFade}><i className="icon-close"></i></Button>
</div>
</CardHeader>
<Collapse isOpen={this.state.collapse} id="collapseExample">
<CardBody>
<Form className="form-horizontal">
<FormGroup>
<Label htmlFor="prependedInput">Prepended text</Label>
<div className="controls">
<InputGroup className="input-prepend">
<InputGroupAddon addonType="prepend">
<InputGroupText>@</InputGroupText>
</InputGroupAddon>
<Input id="prependedInput" size="16" type="text" />
</InputGroup>
<p className="help-block">Here's some help text</p>
</div>
</FormGroup>
<FormGroup>
<Label htmlFor="appendedInput">Appended text</Label>
<div className="controls">
<InputGroup>
<Input id="appendedInput" size="16" type="text" />
<InputGroupAddon addonType="append">
<InputGroupText>.00</InputGroupText>
</InputGroupAddon>
</InputGroup>
<span className="help-block">Here's more help text</span>
</div>
</FormGroup>
<FormGroup>
<Label htmlFor="appendedPrependedInput">Append and prepend</Label>
<div className="controls">
<InputGroup className="input-prepend">
<InputGroupAddon addonType="prepend">
<InputGroupText>$</InputGroupText>
</InputGroupAddon>
<Input id="appendedPrependedInput" size="16" type="text" />
<InputGroupAddon addonType="append">
<InputGroupText>.00</InputGroupText>
</InputGroupAddon>
</InputGroup>
</div>
</FormGroup>
<FormGroup>
<Label htmlFor="appendedInputButton">Append with button</Label>
<div className="controls">
<InputGroup>
<Input id="appendedInputButton" size="16" type="text" />
<InputGroupAddon addonType="append">
<Button color="secondary">Go!</Button>
</InputGroupAddon>
</InputGroup>
</div>
</FormGroup>
<FormGroup>
<Label htmlFor="appendedInputButtons">Two-button append</Label>
<div className="controls">
<InputGroup>
<Input id="appendedInputButtons" size="16" type="text" />
<InputGroupAddon addonType="append">
<Button color="secondary">Search</Button>
<Button color="secondary">Options</Button>
</InputGroupAddon>
</InputGroup>
</div>
</FormGroup>
<div className="form-actions">
<Button type="submit" color="primary">Save changes</Button>
<Button color="secondary">Cancel</Button>
</div>
</Form>
</CardBody>
</Collapse>
</Card>
</Fade>
</Col>
</Row>
</div>
);
}
