A few examples of collecting follow up data within a single view.
The purpose of this page is to illustrate expected behaviour. It's by no means prescriptive in how you should implement a given component.
Being the least mobile-friendly pattern of the category, use with solid rationale.
Consider when labels exceed 44 characters or helper text is necessary for each option.
Helper text if needed
<div class="form-group">
<label class="control-label block">Where do you want to meet?</label>
<form class="controls-stacked flush-ends">
<label class="control radio push-quarter-bottom">
<input id="radio1" name="radio" type="radio" value="radio1">
<span class="control-indicator"></span>
My home
</label>
<div class="flush-bottom hard-top help-block text-muted push-left">
<p>The place where you live.</p>
</div>
<label class="control radio push-quarter-bottom">
<input id="radio2" name="radio" type="radio" value="radio2">
<span class="control-indicator"></span>
Somewhere else
</label>
<div class="flush-bottom hard-top help-block text-muted push-left">
<p>Meeting places can be anywhere — your workplace, a park or even a coffeeshop. Getting together outside of our homes can be of great benefit to your group and local community.</p>
</div>
<div class="form-group border-left border-width-3 push-left">
<div class="push-half-left">
<div class="row">
<div class="form-group col-xs-12">
<label class="sr-only" for="">Location name</label>
<input class="form-control" name="" placeholder="Location name" type="text" id="">
</div>
</div>
<div class="row">
<div class="form-group col-xs-12">
<label class="sr-only" for="">Address</label>
<input class="form-control" name="" placeholder="Address" type="text" id="">
</div>
</div>
<div class="row">
<div class="form-group col-xs-12">
<label class="sr-only" for="">City</label>
<input class="form-control" name="" placeholder="City" type="text" id="">
</div>
</div>
<div class="row">
<div class="form-group col-sm-6 flush-bottom">
<label class="sr-only" for="">State</label>
<select class="form-control">
<option disabled="" selected="">State</option>
</select>
</div>
<div class="form-group col-sm-6 flush-bottom">
<label class="sr-only" for="">Zip code</label>
<input class="form-control" name="" placeholder="Zip" type="text" maxlength="10" id="">
</div>
</div>
</div>
</div>
</form>
<p class="help-block hard-top">Helper text if needed</p>
</div>Use when vertical space allows.
Help text if needed
<div class="form-group">
<label class="control-label block">Where do you mostly pray?</label>
<div class="btn-group btn-group-block" role="group" aria-label="..." data-toggle="buttons">
<label for="" class="btn btn-default">
<input type="radio" autocomplete="off">At home
</label>
<label for="" class="btn btn-default">
<input type="radio" autocomplete="off">On the go
</label>
<label for="" class="btn btn-default">
<input type="radio" autocomplete="off">At work
</label>
<label for="" class="btn btn-default">
<input type="radio" autocomplete="off">Somewhere else
</label>
<div class="row">
<div class="col-xs-12 clear">
<div class="border-left border-width-3">
<div class="push-half-left">
<div class="form-group push-quarter-ends">
<label class="sr-only" for="">Location name</label>
<input class="form-control" name="" placeholder="Like where?" type="text" id="">
</div>
</div>
</div>
</div>
</div>
</div>
<p class="help-block">Help text if needed</p>
</div>Being the least mobile-friendly pattern of the category, use with solid rationale.
Consider when labels exceed 44 characters or helper text is necessary for each option.
For people who share a common activity. From cooking to karate, motorcycles to frisbee golf, veterans or entrepreneurs, whatever your interest, we bet there's a group looking for it.
Your group is primarily focused on building community with the people who live closet together in your town, zip code or on your street.
Grow together through Huddle, reading a book or studying the Bible and applying what you learn to your everyday life.
For people in a similar life stage like empty nesters, singles, foster parents, moms, young married couples, etc.
For people looking for healing and recovery in an area of life.
Helper text if needed
<div class="form-group">
<label class="control-label block">Select up to two</label>
<div class="controls-stacked flush-ends">
<label class="control checkbox push-quarter-bottom">
<input type="checkbox">
<span class="control-indicator" tabindex="0"></span>
Interest
</label>
<div class="flush-bottom hard-top help-block text-muted push-left">
<p>For people who share a common activity. From cooking to karate, motorcycles to frisbee golf, veterans or entrepreneurs, whatever your interest, we bet there's a group looking for it.</p>
</div>
<div class="border-left border-width-3 push-left">
<div class="push-half-left">
<div class="form-group">
<label class="sr-only" for="">Interest</label>
<input class="form-control" name="" placeholder="Ex. Boxing" type="text" id="">
</div>
</div>
</div>
<label class="control checkbox push-quarter-bottom">
<input type="checkbox">
<span class="control-indicator" tabindex="0"></span>
Neighborhoods
</label>
<div class="flush-bottom hard-top help-block text-muted push-left">
<p>Your group is primarily focused on building community with the people who live closet together in your town, zip code or on your street.</p>
</div>
<div class="border-left border-width-3 push-left">
<div class="push-half-left">
<div class="form-group">
<label class="sr-only" for="">Neighborhoods</label>
<input class="form-control" name="" placeholder="Ex. Western Hills" type="text" id="">
</div>
</div>
</div>
<label class="control checkbox push-quarter-bottom">
<input type="checkbox">
<span class="control-indicator" tabindex="0"></span>
Spiritual growth
</label>
<div class="flush-bottom hard-top help-block text-muted push-left">
<p>Grow together through Huddle, reading a book or studying the Bible and applying what you learn to your everyday life.</p>
</div>
<div class="border-left border-width-3 push-left">
<div class="push-half-left">
<div class="form-group">
<label class="sr-only" for="">Spiritual growth</label>
<input class="form-control" name="" placeholder="Ex. Seeker" type="text" id="">
</div>
</div>
</div>
<label class="control checkbox push-quarter-bottom">
<input type="checkbox">
<span class="control-indicator" tabindex="0"></span>
Life stages
</label>
<div class="flush-bottom hard-top help-block text-muted push-left">
<p>For people in a similar life stage like empty nesters, singles, foster parents, moms, young married couples, etc.</p>
</div>
<div class="border-left border-width-3 push-left">
<div class="push-half-left">
<div class="form-group">
<label class="sr-only" for="">Life stage</label>
<input class="form-control" name="" placeholder="Ex. Newlyweds" type="text" id="">
</div>
</div>
</div>
<label class="control checkbox push-quarter-bottom">
<input type="checkbox">
<span class="control-indicator" tabindex="0"></span>
Healing
</label>
<div class="flush-bottom hard-top help-block text-muted push-left">
<p>For people looking for healing and recovery in an area of life.</p>
</div>
<div class="border-left border-width-3 push-left">
<div class="push-half-left">
<div class="form-group">
<label class="sr-only" for="">Healing</label>
<input class="form-control" name="" placeholder="Ex. Addiction" type="text" id="">
</div>
</div>
</div>
</div>
<p class="help-block hard-top">Helper text if needed</p>
</div>Use when vertical space allows.
Helper text if needed
<div class="form-group">
<label class="control-label block">How do you spend free time? (All that apply)</label>
<div class="btn-group btn-group-block" role="group" data-toggle="buttons" aria-label="...">
<label for="" class="btn btn-default">
<input type="checkbox" autocomplete="off">Anything active
</label>
<div class="row">
<div class="col-xs-12 clear">
<div class="border-left border-width-3">
<div class="push-half-left">
<div class="form-group push-quarter-ends">
<label class="sr-only" for="">Activity</label>
<input class="form-control" name="" placeholder="Like what?" type="text" id="">
</div>
</div>
</div>
</div>
</div>
<label for="" class="btn btn-default">
<input type="checkbox" autocomplete="off">Be entertained
</label>
<div class="row">
<div class="col-xs-12 clear">
<div class="border-left border-width-3">
<div class="push-half-left">
<div class="form-group push-quarter-ends">
<label class="sr-only" for="">Entertainment</label>
<input class="form-control" name="" placeholder="By what?" type="text" id="">
</div>
</div>
</div>
</div>
</div>
<label for="" class="btn btn-default">
<input type="checkbox" autocomplete="off">Stay at home
</label>
<div class="row">
<div class="col-xs-12 clear">
<div class="border-left border-width-3">
<div class="push-half-left">
<div class="form-group push-quarter-ends">
<label class="sr-only" for="">Stay home</label>
<input class="form-control" name="" placeholder="And do what?" type="text" id="">
</div>
</div>
</div>
</div>
</div>
<label for="" class="btn btn-default">
<input type="checkbox" autocomplete="off">Other
</label>
<div class="row">
<div class="col-xs-12 clear">
<div class="border-left border-width-3">
<div class="push-half-left">
<div class="form-group push-quarter-ends">
<label class="sr-only" for="">Other</label>
<input class="form-control" name="" placeholder="Like what?" type="text" id="">
</div>
</div>
</div>
</div>
</div>
</div>
<p class="help-block">Helper text if needed</p>
</div>