Form example

This part of the documentation relates to premium templates built with Cruip CSS framework only. If the template you are using is built on the top of Tailwind CSS, please refer to the last part of the documentation.

Here is an example of a full form that you can use to get started 👇

<form>
<fieldset>
<div class="mb-16">
<label class="form-label" for="form-name">Full name</label>
<input id="form-name" class="form-input" type="text" placeholder="Text placeholder" required>
<div class="form-hint">You might display a hint below the form.</div>
</div>
<div class="mb-16">
<label class="form-label" for="form-username">Username</label>
<input id="form-username" class="form-input form-success" type="text" placeholder="Username" value="Cruip" required>
<div class="form-hint text-color-success">You're good to go.</div>
</div>
<div class="mb-16">
<label class="form-label" for="form-email">Email</label>
<input id="form-email" class="form-input form-error" type="email" placeholder="Email" value="hello@" required>
<div class="form-hint text-color-error">Ooops, email is invalid.</div>
</div>
<div class="mb-16">
<label class="form-label" for="form-color">Favourite color</label>
<select id="form-color" class="form-select">
<option hidden>Choose your favourite</option>
<option>Red</option>
<option>Yellow</option>
<option>Blue</option>
</select>
</div>
<div class="mb-16">
<label class="form-label" for="form-message">Message</label>
<textarea id="form-message" class="form-input" placeholder="Textarea placeholder"></textarea>
</div>
<div class="mb-16">
<label class="form-checkbox">
<input type="checkbox">I agree the <a href="#">terms and conditions</a>
</label>
</div>
<div class="mb-16">
<span>
<label class="form-radio">
<input type="radio" name="form-radio">Yes
</label>
</span>
<span class="ml-16">
<label class="form-radio">
<input type="radio" name="form-radio">No
</label>
</span>
</div>
<div class="mt-24">
<div class="button-group">
<button class="button button-primary">Submit</button>
<a class="button-link text-xs">Cancel</a>
</div>
</div>
</fieldset>
</form>

In React and Vue, ensure to import all required components first.

React
Vue
React
<form>
<fieldset>
<div className="mb-16">
<Input
type="text"
placeholder="Text placeholder"
label="Full name"
hint="You might display a hint below the form." />
</div>
<div className="mb-16">
<Input
type="text"
placeholder="Username"
value="Cruip"
label="Username"
status="success"
hint="You're good to go."
required />
</div>
<div className="mb-16">
<Input
type="email"
placeholder="Email"
value="hello@"
label="Email"
status="error"
hint="Ooops, email is invalid."
required />
</div>
<div className="mb-16">
<Select label="Favourite color">
<option hidden>Choose your favourite</option>
<option>Red</option>
<option>Yellow</option>
<option>Blue</option>
</Select>
</div>
<div className="mb-16">
<Input
type="textarea"
placeholder="Textarea placeholder"
label="Message" />
</div>
<div className="mb-16">
<Checkbox>I agree the <a href="#">terms and conditions</a></Checkbox>
</div>
<div className="mb-16">
<span>
<Radio name="form-radio">Yes</Radio>
</span>
<span className="ml-16">
<Radio name="form-radio">No</Radio>
</span>
</div>
<div className="mt-24">
<div className="button-group">
<Button color="primary">Submit</Button>
<a className="button-link text-xs">Cancel</a>
</div>
</div>
</fieldset>
</form>
Vue
<form>
<fieldset>
<div class="mb-16">
<c-input
type="text"
placeholder="Text placeholder"
label="Full name"
hint="You might display a hint below the form." />
</div>
<div class="mb-16">
<c-input
type="text"
placeholder="Username"
value="Cruip"
label="Username"
status="success"
hint="You're good to go."
required />
</div>
<div class="mb-16">
<c-input
type="email"
placeholder="Email"
value="hello@"
label="Email"
status="error"
hint="Ooops, email is invalid."
required />
</div>
<div class="mb-16">
<c-select label="Favourite color">
<option hidden>Choose your favourite</option>
<option>Red</option>
<option>Yellow</option>
<option>Blue</option>
</c-select>
</div>
<div class="mb-16">
<c-input
type="textarea"
placeholder="Textarea placeholder"
label="Message" />
</div>
<div class="mb-16">
<c-checkbox>I agree the <a href="#">terms and conditions</a></c-checkbox>
</div>
<div class="mb-16">
<span>
<c-radio name="form-radio">Yes</c-radio>
</span>
<span className="ml-16">
<c-radio name="form-radio">No</c-radio>
</span>
</div>
<div class="mt-24">
<div class="button-group">
<c-button color="primary">Submit</c-button>
<a class="button-link text-xs">Cancel</a>
</div>
</div>
</fieldset>
</form>