Form example

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>